why isn't this inline box showing -- css positioning and stack level/order

I'm reading through the w3c.org [Visual Formatting specification][1]. Could anyone explain to me why the inline box "outer" is not displaying in my [example here][2]? I was trying to understand absolute and relative positioning. Since there was no positioning on the `

`tag, I thought that by setting the positioning values on `

`, the `` would absolutely position itself to the `div`. But that is not happening. If I remove the `position:relative` from the `

` the `` will display. I tried setting the `z-index` on the `

` to change its stacking order and make it higher than the `

`, but that didn't work either. From what I'm understanding, if an element is `position:absolute`, it will traverse the DOM for the first "positioned" element and position itself with that 'parent' element. And if no positioning is found, it will position itself to its containing element. This doesn't seem to be happening, since its containing element is `

` when there's no positioning, yet the `

` has `position:relative`. I hope I'm explaining this right. [1]: http://www.w3.org/TR/CSS2/visuren.html#stack-level [2]: http://jsfiddle.net/Chris22/P7WJN/ [3]: http://jsfiddle.net/Chris22/P7WJN/

以上就是why isn't this inline box showing -- css positioning and stack level/order的详细内容，更多请关注web前端其它相关文章！