无法弄清楚CSS分层

Question

看下面的图片，我有两个由红色和黑色外部div表示的主要div。 默认情况下，黑色是可见的，当您将鼠标悬停在其中一个较小的黑色div上时，会显示该悬停框的红色div。 这可以找到第一行，但如果你看第二行的最后一个框，你可以看到我想要发生的事情。 实际上，第二行的所有红色框都放在绿线所在的位置。这是因为第一行的第3个红色框的高度。 我花了很多时间试图解决这个问题。有谁知道怎么做？

<div class="container" style="position:relative;">
    <div class="red" style="position:relative;visibilty:visible;z-index:1">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
    <div class="black" style="position:absolute;visibility:hidden;z-index:2">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

Answer 1

将红色和黑色div放在div.box中，位置为：relative。给div.red框位置：绝对值和不透明度为0.然后添加一个规则，将div.black的不透明度设置为0，将div.red设置为div.box:hover。请参阅下面的示例。请注意，我使红色框大于黑色框，但流量很好，因为position：absolute从文档流中删除了红色框。

＆＃13;

＆＃13;

div.box{
  display: inline-block;
  position: relative;
  width: 30%;
  height: 100px;
}

div.box .red {
  opacity:0.0;
  background-color: red;
  position: absolute;
  top:0;
  left: 0;
  width: 100%;
  height: 120px;
  border: 1px red solid;
}

div.box .black {
  position: absolute;
  border: 1px black solid;
  height: 100%;
  width: 100%;
}

div.box:hover .black {
  opacity:0;
}

div.box:hover .red {
  opacity:1.0;
  z-index:1;
}

＆＃13;

<div class="container" style="position:relative;">
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
  <div class="box">
    <div class="black"></div>
    <div class="red"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;