css - 多个 z-index 元素

Question

我正在做一个元素，我对 z-index 属性有一点疑问。

这是我的代码:

(HTML)

 <div class="outer_obw">
  <div class="obw1">
    <div class="box" id="blue_box">
      <div id="inn_blue" class="inner_box"><p>Box1</p></div>
    </div>
  </div>

  <div class="main_box_content">
    <div class="back_box">
      <div class="main_box"> 

        <p id="texts">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

      </div>
    </div>

    <div class="obw3">
        <div class="box" id="green_box">
          <div id="inn_green" class="inner_box"><p>Box2</p></div>
        </div>
      </div>
  </div>
</div>

(CSS)

.outer_obw {
   width: 78.5%;
   margin: 0 auto;
}
.obw1 {    
   min-height: 80px;
}
.obw3 {
   min-height: 80px;
   margin-top: -40px;
}
.box {
   width: 25.25%;
   min-height: 80px;
   cursor:pointer;  
   position: relative;
}
.inner_box {
   height: 68px;
   margin: -10.5px 6px;
   text-align: center;
   position: relative; 
}
#inn_blue {
   background-color: #fff;
   z-index: 5;
}
#inn_green {
   background-color: #fff;
   z-index: 5;
}
#blue_box {
   background-color: blue;
   float: left; 
   z-index: 1;
}
#green_box {
   background-color: green;
   float: right;
}
.main_box_content {
   display: table;
   width: 78.5%;
   position: absolute;
   margin-top: -40px;
}
.back_box {
   display: table;
   background-color: blue;
   width: 65%;
   margin: 0 17%;
   position: relative;
   z-index: 3;
}
.main_box {
   display: table;
   background-color: #f1f1f1;
   margin: 6px;
   padding: 0.5% 3%;
   position: relative;
   z-index: 10;
}

Here都是代码和可视化。

我打算实现这样的效果:

我需要做的就是在 main_box(带文本的灰色区域)和 back_box(主框的红色背景)之间插入 inn_blue 和 inn_green(box1 和 box2 的白色区域)。

我不知道我做错了什么。 main_box 的 Z-index 应该大于 inn_blue/inn_green 的 z-index，inn_blue/inn_green 的 z-index 应该大于 back_box。

在我的代码中也是如此，但是效果不是我所期望的...

所以问题是我做错了什么？

Answer 1

您的示例中有很多复杂的层次。相反，让我们利用自然层来发挥我们的优势，并使用 absolute 定位。和最少的标记。

基础知识

从一个包含三个盒子的包装器开始:

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

包装器将是 position: relative它的三个 child 将被定位为 position: absolute和 top/right/bottom/left .为了允许按比例调整大小的灵活大小，我们可以使用 viewport width ( vw ) unit对于宽度 和 高度。每个子 div 都有一个百分比高度。

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
}
.wrapper div {
  position: absolute;
  height: 25%;
  width: 20%;
}
.wrapper .one {
  top: 16px;
  left: 16px;
  background: blue;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: red;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
  background: green;
}

<div class="wrapper">
  <div class="one"></div>
  <div class="two"></div>
  <div class="three"></div>
</div>

这给了我们这个:

主框分层

现在我们希望红色方 block 与蓝色和绿色方 block 重叠。我们所要做的就是移动红色<div>在标记中位于它们下方。标记中的最后一个元素将自然地与之前的元素重叠。

<div class="wrapper">
  <div class="one"></div>
  <div class="three"></div>
  <div class="two"></div><!-- move it one line down -->
</div>

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
}
.wrapper div {
  position: absolute;
  height: 25%;
  width: 20%;
}
.wrapper .one {
  top: 16px;
  left: 16px;
  background: blue;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: red;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
  background: green;
}

<div class="wrapper">
  <div class="one"></div>
  <div class="three"></div>
  <div class="two"></div><!-- move it one line down -->
</div>

现在我们有了正确的图层:

添加边框图层

为了降低复杂性，我们可以用 :before pseudo elements 创建框边框.这些将创建我们创建重叠边框所需的额外元素。

给每个 child div一个:before元素和背景颜色如下:

.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.two:before {
  background: red;
}
.three:before {
  background: green;
}

-1 z-index 将确保它们与 div 背景和 -6px 重叠。所有边上的位置将它们拉到外面 6 像素，给我们一个 6 像素的边框。

最终产品

我们添加z-index: 1到包装器，这样它就不会与我们的边框伪元素重叠。 box-sizing: border-box用于将填充合并到宽度和高度中。

示例 1

这个例子的局限性:我们不能使用overflow隐藏主框上过多的文本，因为它会切断我们的边框或导致滚动条始终存在..

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
  max-width: 772px;
  max-height: 579px;
  min-width: 390px;
  min-height: 292px;
  z-index: 1;
}
.wrapper div {
  position: absolute;
  box-sizing: border-box;
  background: #FFF;
  height: 25%;
  width: 20%;
  text-align: center;
  padding: 10px;
}
.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.two:before {
  background: red;
}
.three:before {
  background: green;
}
.wrapper .one {
  top: 16px;
  left: 16px;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: #EEE;
  text-align: left;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
}

<div class="wrapper">
  <div class="one">Box1</div>
  <div class="three">Box3</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>

例子2

稍微不太优雅，主框边框相对于包装器本身定位，我们可以使用overflow在这个例子中切断或滚动过多的文本。

.wrapper {
  position: relative;
  background: #EEE;
  height: 60vw;
  width: 80vw;
  max-width: 772px;
  max-height: 579px;
  min-width: 390px;
  min-height: 292px;
  z-index: 1;
}
.wrapper div {
  position: absolute;
  box-sizing: border-box;
  background: #FFF;
  height: 25%;
  width: 20%;
  text-align: center;
  padding: 10px;
}
.wrapper:after {
  content: '';
  position: absolute;
  margin: -23% 0 0 -31%;
  top: calc(50% - 6px);
  left: calc(50% - 6px);
  height: calc(60% + 12px);
  width: calc(62% + 12px);
  background: #F00;
  z-index: -1;
}
.wrapper div:before {
  content: '';
  position: absolute;
  top: -6px;
  right: -6px;
  bottom: -6px;
  left: -6px;
  z-index: -1;
}
.one:before {
  background: blue;
}
.three:before {
  background: green;
}
.wrapper .one {
  top: 16px;
  left: 16px;
}
.wrapper .two {
  top: 50%;
  left: 50%;
  margin: -23% 0 0 -31%;
  height: 60%;
  width: 62%;
  background: #EEE;
  text-align: left;
}
.wrapper .three {
  bottom: 16px;
  right: 16px;
}

<div class="wrapper">
  <div class="one">Box1</div>
  <div class="three">Box3</div>
  <div class="two">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
</div>