ansaurus

Question

Why is my element with position:absolute always showing up underneath position:relative items?

Answer 1

+9 A:

instead of "z-layer" use "z-index"

also the absolute span is in a relative div with no z-index

Here is the correct html:

<div style="background-color:#eeeeee;margin:auto;height:500px;width:500px">
    <div style="position:relative;z-index:2">
        <span style="position:absolute;display:block;height:250px;width:250px;background:green"><br /><br />Should be on top</span>
    </div>
    <span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
</div>

Jeremy 2009-02-23 17:35:52

Answer 2

+1 A:

It happens because when you position an element "absolutely" it is removed from the flow of the document in the Document Object Model and so elements that remain in the flow of the document appear "above" the removed element. For cross-browser compatibility place your z-index adjustments on the parent element of the absolutely positioned element.

Nick Allen - Tungle139 2009-02-23 17:38:47

ansaurus

tags:

views:

answers:

Why is my element with position:absolute always showing up underneath position:relative items?

related questions