Div元素重疊包裝div到前面的div

Question

我試圖讓第二個包裝div中的圖標交叉並解剖以前的包裝div，但應該出現在div上面的一半不會出現。即使有更高的Z指數。如果我改變包裝div的溢出或位置樣式，它會拋出所有的東西。什麼是正確的方法來做到這一點？下面是HTML和CSS的：

.wrapper { 
 
    position: relative; 
 
    width: 100%; 
 
    padding-bottom: 40px; 
 
    height: auto; 
 
    clear: left; 
 
    overflow: auto; 
 
    z-index: 1; 
 
} 
 
.process { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
} 
 
.process .icon { 
 
    position: relative; 
 
    height: 123px; 
 
    width: 123px; 
 
    margin-top: -60px; 
 
    border-radius: 50%; 
 
    z-index: 3; 
 
}

<div class="wrapper"> 
 
    <div class="page-heading"> 
 
    <div class="col-md-6 col-centered"> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="wrapper blue"> 
 
    <div class="process"> 
 
    <div class="icon blue border-blue col-centered"> 
 

 
    </div> 
 
    <div class="col-md-4 col-md-offset-1"> 
 
     <div class="entry-content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-md-7 padding-right-100"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

大量的研究和拔頭髮後，我發現了一個可行的解決方案。不知道爲什麼，但父div必須有display：table和child div display：table-row。如果有人知道爲什麼這個作品，絕對可以隨意分享。

Answer 2

沒有必要的表格顯示。你需要的是所有元素的實際高度 - 自動高度不會在沒有內容的情況下工作，如果父容器的高度（在本例中爲body）也被定義，則100％高度才起作用。我使身體100％和兩個包裝50％。

圓DIV已經與margin: 0 auto horzontally集中，並推上了使用top: -60px而position: relative。 z-index保持不變1爲包裝，3爲圓/圖標（也可爲2）。

還有一個在http://codepen.io/anon/pen/KgNXmj

html, body { 
 
    height: 100%; 
 
    margin: 0; 
 
} 
 
.wrapper { 
 
    width: 100%; 
 
    height: 50%; 
 
    z-index: 1; 
 
    background: green; 
 
} 
 
.process { 
 
    width: 100%; 
 
    height: 100%; 
 
    z-index: 1; 
 
    background: blue; 
 
} 
 
.process .icon { 
 
    position: relative; 
 
    top: -60px; 
 
    margin: 0 auto; 
 
    height: 123px; 
 
    width: 123px; 
 
    background: #f00; 
 
    border-radius: 50%; 
 
    z-index: 3; 
 
}

<div class="wrapper"> 
 
    <div class="page-heading"> 
 
    <div class="col-md-6 col-centered"> 
 

 
    </div> 
 
    </div> 
 
</div> 
 
<div class="wrapper blue"> 
 
    <div class="process"> 
 
    <div class="icon blue border-blue col-centered"> 
 

 
    </div> 
 
    <div class="col-md-4 col-md-offset-1"> 
 
     <div class="entry-content"> 
 

 
     </div> 
 
    </div> 
 
    <div class="col-md-7 padding-right-100"> 
 

 
    </div> 
 
    </div> 
 
</div>