CODEWITHSUNDEEP
htmlcss
Juraj Garaj
Juraj Garaj

Reputation: 113

Drop shadow on hover Div over others Divs

I have few divs like that:

<div class="tab">
   <h2>Text</h2>
</div>
<div class="tab">
   <h2>Text</h2>
</div>
<div class="tab">
   <h2>Text</h2>
</div>

and css:

.tab {
    background: #ffffff;
    width: 100%;
    height: 50px;
    border-color: #B6B6B6;
    border-top: solid 1px #B6B6B6;
    transition: 0.3s;
    line-height: 12px;
}
.tab:hover {
    background: #EEEEEE;
    transition: 0.3;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
    z-index:1000
}

as you can see I want to make div drop shadow when hover over it. But everytime when I hover over div, dropshadow is under another div. Can you help me fix it?

This is how it's look like when over over last div:

Upvotes: 1

Views: 1811

Answers (1)

sebnukem
sebnukem

Reputation: 8323

The z-index property works only on relative, absolute or fixed positioned elements.

Add this to your stylesheet:

.tab {
  position:relative;
}

http://jsfiddle.net/sebnukem/wp3ryLh8/4/

Upvotes: 2

Related Questions