I’m reading through the w3c.org Visual Formatting specification.
Could anyone explain to me why the inline box “outer” is not displaying in my example here? I was trying to understand absolute and relative positioning. Since there was no positioning on the <p>tag, I thought that by setting the positioning values on <div>, the <span id="outer"> would absolutely position itself to the div. But that is not happening. If I remove the position:relative from the <div> the <span id="outer"> will display. I tried setting the z-index on the <p> to change its stacking order and make it higher than the <div>, 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 <p id=inline> when there’s no positioning, yet the <div id="container"> has position:relative. I hope I’m explaining this right.
It is being properly displayed, but it’s still subject to the borders of the containing div. You’ve got that div set to “overflow: hidden”, and the #outer span’s absolute position makes it fall outside the div’s borders, so it’s effectively invisible.
If you take off the “overflow: hidden”, you’ll see the box show up instantly.