CODEWITHSUNDEEP
htmlcsslayoutcross-browser
Mithun Sreedharan
Mithun Sreedharan

Reputation: 51282

CSS z-index cross-browser issue for links inside a absolutely positioned DIV

Please see http://jsfiddle.net/mithun/nuF2Q/1/

I've the HTML structure 

<div id='slider'>
    <ul>
        <li> 
            <a class='pride' href="i1.html"> Item 1 </a>
            <div class='info'> 
                <a class='roar' href="i1.html"> Description 2 </a>
            </div>
        </li>
        <li> 
            <a class='pride' href="i2.html"> Item 2 </a>
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 1 </a>
            </div>
        </li>
        <li>
            <a class='pride' href="i3.html"> Item 3 </a>
             <div class='info'> 
                <a class='roar' href="i1.html"> Description 3 </a>
            </div>
           </li>
        <li>
            <a class='pride' href="i4.html"> Item 4 </a> 
                        <div class='info'> 
                <a class='roar' href="i1.html"> Description 4 </a>
            </div>
         </li>
    </ul>
 <div>

and CSS 

#slider {
    width : 400px;
    height: 100px;
    border: 1px solid #bcd;
    background-color: #def;
    position:relative;
    z-index:0 !important;
}

#slider ul{
    margin:0px;
    padding:0px;
    list-style:none;
}

#slider ul li {
    margin:0px;
    padding:0px
    list-style:none;
    width:100px;
    z-index:10;
}
#slider ul li a.pride {
    color: #333;
    display: block;
    text-decoration: none;
    padding: 2px 0px 2px 10px;
}
#slider ul li.active a.pride,
#slider ul li:hover a.pride {
    background-color: #ffff7c;
}    

#slider ul li div.info {
    background-color: #9ab;
    border: 1px solid #ccc;
    display:none;
    position:absolute;
    right: 0;
    top:0;
    z-index:-5;
}
#slider ul li.active div.info,
#slider ul li:hover div.info {
    display:block;
}
#slider ul li div.info a.roar{
    color: #0a0;
    display:block;
    width: 280px;
    height: 80px;
    padding: 10px 10px 10px 30px;
    text-decoration: none;
    z-index:10;
}

Issue is links inside the Div's are not click able, actually they are behind the UL

-- update

It happens only in Webkit/Gecko browsers

Opera and IE are displaying it correctly

Upvotes: 1

Views: 1913

Answers (3)

thirtydot
thirtydot

Reputation: 228182

This fixes it for me in Firefox and Chrome:

<div id='slider'>
    <ul style="width:100px">

100px might not be is the optimum width.

Upvotes: 1

Breezer
Breezer

Reputation: 10490

here

http://jsfiddle.net/nuF2Q/4/

what you had done wrong was settting the z-index to -5; for div.info which made it get under the ul element which prevented you from clicking the links...

so what i did was change it to 5 and then set the a.prid links position to relative and add a index of 6 so it would overlapp the div.info element

Upvotes: 1

dzollman
dzollman

Reputation: 27

z-index only has an effect when the element has the 'position' property set--so try putting 'position: relative' on the elements with z-index that don't already have the property.

In addition, elements naturally stack in the order in which they appear in the source. When elements overlap, the once that appear later will be stacked on top of the ones that appear earlier. So if you remove the z-index property from everything on the stylesheet, you should also have the desired result.

Upvotes: 0

Related Questions