CSS,z-index DIV'应该在悬停时叠加其他DIV

Question

我有一个问题,现在它吓坏了我好几天了.

我需要一个带有几个较小的DIV-Containers的竞争者Div,它们都应该浮动:左边...如果我悬停一个较小的DIV,高度和宽度应该增加,它应该覆盖其他DIV而不移动它们.

我的代码看起来像这样:

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

CSS:

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

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

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

任何帮助都非常感谢!

欢呼,杰伊

Answer 1

z-index仅适用于定位元素 (位置:绝对,位置:相对或位置:固定).

而不是浮动尝试位置绝对.

我在每个盒子周围添加了一个容器,并将每个元素放在其中.这样,您可以根据需要添加任意数量的框并保持相同的类.

例

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/