CSS 2 Position:Fixed Elements weird behaviour - html

Question

I've been playing around with CSS and I'm stuck with one really awful problem - position:fixed. The problem is that I'm editing wordpress template and as it is known, there's an admin bar with position:fixed in every template. I've tried to add another bar, like a menu, below that admin bar, but it always shows not directly below the admin bar, but about 50px below it. The menu is fixed, but not in the exact place I want it to show up.
I cannot place the menu bar with property top:28px, because the admin is only visible for the registered users, so for guests, the menu would still float 28px below an invisible object. As for registered, it would be fine, but as I've said, not for guests.
Pasting the code of admin bar and menu, maybe someone of you may find the problem...
#headerbar {
min-width: 100%;
height: 55px;
background-color: rgb(0, 166, 81);
z-index: 999999;
position:fixed;
}
#wpadminbar {
direction: ltr;
color: rgb(204, 204, 204);
font: 13px/28px sans-serif;
height: 28px;
position: fixed;
top: 0px;
left: 0px;
width: 100%;
min-width: 600px;
z-index: 9999;
background: linear-gradient(to top, rgb(55, 55, 55) 0px, rgb(70, 70, 70) 5px) repeat scroll 0% 0% rgb(70, 70, 70);
}
If this is not enough to spot the problem, I could post the body CSS (if only needed?).

Answer 1

You could set different top positions for logged-in and non-logged-in users. Like, give your header bar a default top position of 0, when the user is logged in and an admin, give it an additional "with-admin-bar" class which will set the top position to 28px or so.
EDIT: Actually, this here is the more correct and clean solution:
CSS:
.bar-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%
}
.admin-bar {
height: 50px;
background: red;
}
.other-bar {
height: 50px;
background: blue;
}
HTML:
<div class="bar-wrapper">
<div class="admin-bar"></div>
<div class="other-bar"></div>
</div>
See it live: http://jsfiddle.net/CVeXA