CODEWITHSUNDEEP
htmlcsshtml-listsz-indexcss-position
Lu Vue
Lu Vue

Reputation: 77

Trouble with stacking in ul

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

Upvotes: 2

Views: 56

Answers (3)

Narendra
Narendra

Reputation: 3117

Please check this. http://jsfiddle.net/YMrLd/18/

The following CSS is there in the fiddle link.

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

And let me know you need anything different. Please attached a screenshot of your desired output if this doesn't help.

Upvotes: 1

Zhihao
Zhihao

Reputation: 14747

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.

Upvotes: 2

Zeta
Zeta

Reputation: 105885

position:absolute will remove an element from the flow. You'll need to use position on .class_span too with a higher z-index.

Upvotes: 1

Related Questions