多个z-index元素

Question

我＆＃39;我正在做一个项目，我对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，其三个子项将定位为position: absolute和top / right / bottom / left。为了允许灵活的大小按比例调整大小，我们可以对宽度和使用viewport width (vw) unit高度。每个子div都有一个百分比高度。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这给了我们这个：

分层主框

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

添加边框图层

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

为每个子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位置将它们拉出6px，以便为我们提供6px边框。

最终产品

我们将z-index: 1添加到包装器中，以便它不会与我们的border伪元素重叠。使用box-sizing: border-box以便将填充结合到宽度和高度中。

示例1

此示例的限制：我们无法使用overflow隐藏主框上的过多文字，因为它会切断边框或导致滚动条始终存在。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

示例2

稍微不那么优雅，主框边框相对于包装器本身定位，我们可以在此示例中使用overflow来剪切或滚动过多的文本。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

通过简化标记和css，只对z-indexing必需品（即.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;

设置.back_box

Answer 4

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;