css - Higher z-index box, doesn't overlap lower z-index one -

why box2 not overlapping box1 below it, when has higher z-index box1?

    .box1 {        height: 30px;        width: auto;        z-index: 1;        position: relative;      }      .box2 {        position: absolute;        height: 20px;        border: 1px solid red;        background-color: white;        z-index: 2;      }

<div class='box1'>    box    <div class='box2'>should overlap</div>  </div>    <div class='box1'>    why not partially hidden?  </div>

here's fiddle: http://jsfiddle.net/k7m4y42l/ , one, resembles html structure: http://jsfiddle.net/1nv8fd93/

you giving box2 z-index that's higher z-index of box1, since put inside box1, z-index gets reset in way.

this means give z-index of <2 inside box1 gets hidden under box2.

this problem can solved in 2 ways: pure css or jquery.

css

in css, it's easy: change z-index of box1 on hover, so:

.box1:hover {     z-index: 3; } 

this make current box1 hovering on have higher z-index other box1s on page. have added small hover-effect on box2 well, bit more end-product want.

working fiddle

jquery

in jquery it's bit more complicated necessary, result same above (i'd go css solution). piece of code below following:

when mouse hovers on .box1, adds z-index: 3 specific box1, if contains div class box2.

jquery

$('.box1').mouseover(function() {     $(this).has(".box2").css('z-index', 3); }); 

working fiddle.

in way, above complicate :hover-effect. it's after making solution thought adding :hover on box1 , adapting z-index. since might useful (probable none), i've left in answer.