Question

I am having trouble with element stacking in a HTML page. I need to get span (class=“class_span”) to have a higher stacking order than div (class=“class_div”) with border. I have tried to change the z-index but with no luck. I know that I should not use absolute position, but the page is dependent on it, sorry. How can I accomplish this?

HTML:

<ul>
    <li>
        <div class="class_div">
        </div>
        <span class="class_span">
            <a href="google.com">google</a>
        </span>
    </li>
</ul>​

CSS:

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
}
.class_span{
    float: left;
}​

Live DEMO

Answer 1

Add position: relative to the span so that you can apply z-index on it. Note that the z-index of your span must be higher than that of the div so that it appears above the div:

.class_div{
    position: absolute; 
    border: 100px solid; 
    width:100px;
    height:50px;
    left:0px;
    z-index: 1;
}
.class_span{
    float: left;
    position: relative;
    z-index: 10;
}​

Example

Edit:

As an alternative to float: left, you might consider using position: absolute and set left to 0px:

.class_span{
    position: absolute;
    left: 0;
    z-index: 10;
}​

You may need to set the top as well, and it may also be necessary to set a parent element’s position to relative so that the span can be positioned relative to that parent element.