CODEWITHSUNDEEP
csshtmlz-index
Jack Guy
Jack Guy

Reputation: 8523

change z-index of nested div

I have a fixed header div and a fixed side bar div on a web page. A shadow extends past the height of the menu. When the menu shadow overlaps the links, they are only partially hoverable. I've not find a way to change the z-index of the links. Can someone help me?

Example: http://jsfiddle.net/Kf6Fw/2/

Upvotes: 1

Views: 1301

Answers (2)

Mr. 14
Mr. 14

Reputation: 9528

One way of solving it is to add another div, #top-wrap, around #top

<div id="side">
    <div id="top-wrap">
        <div id="top">
            <a href='#'>Dictionary</a>
            <a href='#'>Comments</a>
        </div>
    </div>
</div>

So you can set the that with a lower z-index than that of #menu_all

#top-wrap
{
    height:50px;
    width:100%;
    background-color:green;
    margin-top:75px;
    font-size:20px;
    z-index:4;
}

#top
{
    position:relative;
    z-index:6;
}

Upvotes: 1

zenkaty
zenkaty

Reputation: 1548

If you put this z-index: 6; position: relative; on #top then it goes over the shadow, but you also lose the shadow.

I would recommend moving the link down - having a shadow go over the link is not good usability anyway.

Upvotes: 2

Related Questions