#OtherAnnouncements is behind
#Announcement. Give
#Announcement a non-white background color, then turn its positioning on and off in Firebug to see this. From the CSS 2.1 standard on
Layered presentation (§ 9.9):
Boxes with the same stack level in a stacking context are stacked back-to-front according to document tree order.
Since both elements are positioned, they are in the same stacking context (CSS 2.1, § 9.9.1):
6. a stacking level for positioned descendants with 'z-index: auto', and any descendant stacking contexts with 'z-index: 0'.
Floats aren't normally covered up because they're in a higher stacking context:
3. a stacking level containing in-flow non-inline-level non-positioned descendants.
4. a stacking level for non-positioned floats and their contents.
Give
#OtherAnnouncements a positive z-index and it will be placed in front of
#Announcement.
There's still the border around
#Announcement to contend with. You could put
#OtherAnnouncements inside
#Announcement (if that makes structural sense), or you could move the border to
#BodyWrapper. In either case, set overflow on
#BodyWrapper to "auto" so that it
contains floated descendents.
