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

这是所有代码和可视化。

我打算达到这样的效果：

我需要做的就是在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 ，它的三个子节点将被定位为position: absolute和top / right / bottom / left 。 为了允许灵活的大小按比例调整大小，我们可以使用视口宽度（ vw ）单位的宽度和高度。 每个子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> 

这给了我们这个：

层主框

现在我们希望红色方块与蓝色和绿色方块重叠。 我们所要做的就是在标记中移动它们下面的红色<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伪元素:before创建框边框。 这些将创建我们创建重叠边框所需的额外元素。

给每个子div :before元素和背景颜色: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位置将它们拉出6px，以给出6px边框。

最终产品

我们将z-index: 1添加到包装器中，以便它不会与我们的border伪元素重叠。 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> 

Answer 2

通过简化标记和css，只对z必需的索引（即.top-box-border和.mid-box-inner）我相信我有你想要的东西：

 [class*="border"] { width: 100px; height: 100px; border: 10px solid green; position: relative; } [class*="inner"] { width: 100%; height: 100%; background-color: #999; position: relative; text-align: center; box-sizing: border-box; padding: 1ex 1em; } .mid-box-border { width: 200px; height: 200px; border-color: blue; margin-top: -40px; margin-left: 75px; } .mid-box-inner { background-color: #ccc; text-align: left; z-index: 20; } .bot-box-border { margin-top: -40px; margin-left: 255px; } .top-box-border { z-index: 10; } 

 <div class="top-box-border"> <div class="top-box-inner">Box 1</div> </div> <div class="mid-box-border"> <div class="mid-box-inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic accusantium dicta sint a cum eveniet, id! Corrupti sit reprehenderit ad veniam ratione mollitia molestiae, sapiente quasi id esse, incidunt eligendi.</div> </div> <div class="bot-box-border"> <div class="bot-box-inner">Box 2</div> </div> 

Answer 3

设定position: initial; for .back_box

Answer 4

只需为每个框创建相对位置，并为背景（边框）和内容持有者设置绝对位置，使其脱离工作流程，然后第一个元素将采用更高的z-index ，后面的元素将更低，看看这一个https://jsfiddle.net/s3y94x1w/

 * { box-sizing: border-box; padding: 0; margin: 0; } .cont { width: 100%; } .blue-box { width: 20%; height: 150px; position: relative; margin: 10px 0px 0px 8%; cursor: pointer } .blue-box .background { background-color: blue; height: 100%; width: 100%; position: absolute; } .blue-box .content { background-color: #fff; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 2 } .red-box { width: 40%; height: 150px; position: relative; margin-left: 19%; margin-top: -70px; } .red-box .background { background-color: red; height: 100%; width: 100%; position: absolute; } .red-box .content { background-color: #eee; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; z-index: 3; overflow: hidden } .green-box { width: 20%; height: 150px; position: relative; margin-left: 50%; margin-top: -70px; cursor: pointer } .green-box .background { background-color: green; height: 100%; width: 100%; position: absolute; z-index: -1 } .green-box .content { background-color: #fff; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; } 

 <div class="cont"> <div class="blue-box"> <div class="background"></div> <div class="content">Box1</div> </div> <div class="red-box"> <div class="background"></div> <div class="content">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> <div class="green-box"> <div class="background"></div> <div class="content">Box2</div> </div> </div>