Jquery & CSS - Overlapping divs

Question

I'm trying to create a expnd divs when user mouse over with Jquery and CSS. My jsFiddle works great into Opera Browser but into Chrome when i hover the box "B" and return to box "A" this is overlaped by the box "B". How to solve it?. Here's my code block:

HTML:

<div id="box">
    <div class="inner" id="01">
        <a href="#" class="block">
            <span id="s01" class="s01">A</span>
        </a>
    </div>
    <div class="inner" id="02">
        <a href="#" class="block">
            <span id="s02" class="s01">B</span>
        </a>
    </div>
</div>

CSS:

body {

    background-color:navy;
}
#box {
    height: 92px;
    _height: 92px; 
    width: 290px;
    _width: 270px;
    float: left;
    margin-left: 9px;
    margin-top: 48px;
    margin-bottom: 31px;
    margin-right: 26px;
    background-color: #FFF;
    _overflow:hidden;
}
.inner {
    height: 90px;
    width: 141.6px;
    _width: 121.6px;
    background-color: #FFFFFF;
    float: left;
    padding-top: 0px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 16px;
    color: #2DA2A8;
    cursor: pointer;
    z-index:0;
}
.s01 {
    text-align: center;
    display: block;
    height:100%;
    cursor: pointer;
    padding-top: 36px;
}
.block {
    color:#399;
}

JS:

$(document).ready(function(){


    $("#01").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)","z-index":"2",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#01").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)","z-index":"0",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})


     $("#02").mouseover(function(){$(this).css({
      transition:"all 1s",transform:"scale(1.2)","z-index":"2",
      "background-color":"#24C9C4","border-top":"solid 1px white",
       "border-bottom":"solid 1px white"})})

     $("#02").mouseout(function(){$(this).css({
       transition:"all 1s",transform:"scale(1.0)","z-index":"0",
        "background-color":"#FFF","border-top":"none",
         "border-bottom":"none"})})

});

Not sure what version of Opera it works for you, but both in Chrome (31.0.1650.63) and Opera (18.0.1284.68) B overlaps A for me. The overlapping is the expected behaviour though — robertp, Dec 17 '13 at 11:41

score 2 · Accepted Answer · edited May 23 '17 at 10:25

Probably the neatest way to solve this is to add position:relative to the divs, this will enable z-index to work.

If you don't do this, the divs are defaulted to position:static which ignores z-index, see: Why is z-index ignored with position:static?

There is more information here, which explains why it works in Opera but not Chrome: http://yagudaev.com/posts/getting-reliable-z-index-cross-browser/

position:absolute would work as well if you wanted to use that instead, but you would need to specify exactly where you want the divs to be placed.

Updated your fiddle: http://jsfiddle.net/ua444/1/

You already had a class on those divs so the only change is:

.inner {    
    position: relative;
}

score 1 · Answer 2 · answered Dec 17 '13 at 11:47

1

I've forked and updated your fiddle.

The z-index and relative positioning should work: http://jsfiddle.net/robertp/y48BD/

I removed the z-index manipulation from the JavaScript and used :hover state to change the z-index instead:

  .inner {
    ...
    position: relative;
  } 

  .inner:hover {
    z-index: 1;
  }

I hope this is something you've been after.

answered Dec 17 '13 at 11:47

robertp

3,557
1
20
13

Not sure why, but in his response to div "A" is taking a little longer to override the div "B", I think I should keep the z-index in javascript. Anyway thanks. – V.Salles Dec 17 '13 at 12:02

Jquery & CSS - Overlapping divs

2 Answers2

Linked