Z-index bug when hover in Opera and Chrome

Question

.blog-box {
    background-color: #fff;
    width: 300px;
    height:auto;
    margin-bottom: 15px;
    -webkit-transition: all .3s ease-in-out;
    -moz-transition: all .3s ease-in-out;
    -ms-transition: all .3s ease-in-out;
    transition: all .3s ease-in-out;
}
.blog-box:hover {
    box-shadow: 5px 5px 10px  #000;
    -webkit-transform:  scale(1.1);
    -moz-transform:  scale(1.1);
    -ms-transform:  scale(1.1);
    transform: scale(1.1);
    z-index: 9999;
}

Above is my CSS code. When I hover over a box, it is supposed to be on top of the others. It works fine in Mozilla, but not in Chrome and Opera. There seems to be a bug using z-index.

Here is a link: http://chapuadevil.comoj.com/blog.html

Answer 1

The z-index will not work correctly for position: static items, the elements index will simply follow the flow of the HTML.

Add position:relative to your .blog-box:hoverclass

.blog-box:hover{
    box-shadow: 5px 5px 10px  #000;
    -webkit-transform:  scale(1.1);
    -moz-transform:  scale(1.1);
    -ms-transform:  scale(1.1);
    transform: scale(1.1);
    z-index: 9999;
    position: relative;
}

EDIT: Probably best to add it to your .blog-box class instead.