[ACCEPTED]-Why is my element with position:absolute always showing up underneath position:relative items?-xhtml

Accepted answer
Score: 12

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

also the 2 absolute span is in a relative div with 1 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>
    <span style="position:relative;display:block;width:500px;background:blue;z-index:1">Actually on top</span>
Score: 4

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

More Related questions