How to get a div with z-index to overlay another div on hover

Question

I have a container div with several smaller div:s inside, all of them with float:left;. If I hover one of the smaller div:s the height and width should be increased and it should overlay the other div:s without moving them.

HTML:

 <div id="boxcontainer">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
 </div>

CSS:

.box {
  float:left;
  position: relative;
  width:150px;
  height:150px;
  margin:5px;
  background-color: yellow;
}

#boxcontainer {
  position: relative;
  width:500px;
  height:auto;
}

.box:hover {
  z-index:100;
  width:300px;
  height:auto;
}

How can I achieve this?

Answer 1

z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

Instead of float left try position absolute.

I have added a container around each box and positioned each element absolutely within it. This way you can add as many boxes as you wish and keep the same class.

EXAMPLE

HTML

<div id="boxcontainer">
    <div class="box">
        <div class="Inside"></div> 
    </div>         
    <div class="box">
        <div class="Inside"></div> 
    </div>         
    <div class="box">
        <div class="Inside"></div> 
    </div>     
</div>

CSS

#boxcontainer{
    position: relative;
    width:500px;
    height:500px;
}
.box{
    position:relative;
    float:left;
    width:150px;
    height:150px;
    margin:5px;
}
.Inside{    
    background:green;
    position:absolute;
    top:0;
    left:0;
    width:150px;
    height:150px;
    transition:all 0.5s ease-in-out;
    -webkit-transition:all 0.2s ease-in-out;
}
.Inside:hover{
    z-index:100;
    width:250px;
    height:250px;
    background:#666666;
}

http://jsfiddle.net/JJ3v4/3/

Answer 2

Live Demo: http://jsfiddle.net/hKL4f/1/

I think the easiest way to do what you want would be to use a CSS transform.

.box:hover {
    transform: scale(2, 2);
}

That way you alter the dimensions of the element on hover without affecting any of the other elements in the document flow around it.

If you want the boxes to expand in a different way (ie, to the right and bottom rather than in all directions) you can set a transform-origin property (default is 50% 50%).