css - 如何让一个带有 z-index 的 div 在悬停时覆盖另一个 div

Question

我有一个容器 div，里面有几个较小的 div:s，它们都带有 float:left;。如果我将鼠标悬停在较小的 div:s 之一上，则 height 和 width 应该增加并且它应该覆盖另一个 div:s 不移动它们。

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;
}

我怎样才能做到这一点？

Answer 1

z-index 仅适用于定位元素 (position:absolute、position:relative或位置:固定)。

尝试绝对位置而不是向左浮动。

我在每个盒子周围添加了一个容器，并将每个元素绝对定位在其中。通过这种方式，您可以根据需要添加任意数量的框并保持同一类。

示例

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/