CSS: position:fixed inside of position: fixed

Question

Okay, I've noticed something, but couldn't find it in the CSS spec. Styling an element with position: fixed will position it absolutely, with respect to the browser viewport. What happens if you place a fixed-position element inside another? Example CSS along the lines of:

.fixed {
    position: fixed;
    width: 100px;
    height: 100px;
    background: red;
}

#parent { right 100px;  padding: 40px; }

.fixed .fixed { background: blue; }

And HTML:

<div id="parent" class="fixed"> <div class="fixed"> </div> </div>

As far as I can tell, the element is fixed-positioned with respect to its nearest parent that's also fixed-positioned. Is this osbervable in all browsers; also, is it a bug, or intentional behaviour?

So far I've not found anything on this topic on the internet, just 'fixed position makes it stick to the page'.

Answer 1

I don't think this is really the intent. Things with fixed positioning are all positioned in relation to the window, if you have a fixed a child of another fixed, what do you want to happen? You can easily duplicate the behavior by not just position both of the fixed elements separately, or using other position to alter the child's position within the fixed element. :D

Answer 2

I dont think there is anything more to this then what w3c say there is:

Generates an absolutely positioned element, positioned relative to the browser window. The element's position is specified with the "left", "top", "right", and "bottom" properties

So if you get rid of that "padding: 40px;" you will get 2 elements - 1 over another.

Same effect like if you positioned both elements absolutely to top:0 left:0 with same parent(body).

Answer 3

The fixing and the positioning are two separate things. They're positioned the same as absolutely positioned elements: relative to their containing block. But in contrast with absolutely positioned elements, they remain fixed to that position with respect to the viewport (i.e. they don't move when scrolling):

http://www.w3.org/TR/CSS2/visuren.html#propdef-position

The box's position is calculated according to the 'absolute' model, but in addition, the box is fixed with respect to some reference.

Positioning

The definition of containing block says:

If the element has 'position: fixed', the containing block is established by the viewport in the case of continuous media (...)

and

If the element has 'position: absolute', the containing block is established by the nearest ancestor with a 'position' of 'absolute', 'relative' or 'fixed' (...)

which seems to suggest that while their positioning algorithm is the same (they're both positioned relative to their containg block), the containing block for fixed elements is always the viewport, in contrast with absolutely positioned elements, so they should be positioned relative to that and not to any absolutely or fixed-positioned elements.

And as a matter of fact, that is indeed the case. For example, if you add top: 20px to .fixed, both divs will be positioned 20 pixels from the top of the viewport. The nested fixed div does not get positioned 20 pixels down from the top of its parent.

The reason you're not seeing that in this case is because you're not actually setting any of the left/top/right/bottom properties, so their positions are determined by the position they would have in the flow (their "static position"), which as my first quote said, is done according to the absolute model.