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