div要素が前のdivに重複するようにdiv

Question

2番目のラッパー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

は、私が働く解決策を見つけました。 WHYだが、親のdivはdisplay：tableとchild div display：table-rowを持っていなければならなかった。なぜ誰かがこの作品がうまくいけば、間違いなく分かち合いましょう。

Answer 2

テーブルの表示は必要ありません。必要なのは、すべての要素の実際の高さです。自動高さは内容なしでは機能しません。高さ100％は、親コンテナの高さ（この場合はbody）も定義されている場合にのみ機能します。私は体を100％、2つのラッパーを50％作りました。

サークルDIVは、margin: 0 autoで中心に置かれ、top: -60pxを使用してプッシュアップされ、position: relativeを持ちます。 Z-インデックスは、ラッパーの場合は1、サークル/アイコンの場合は3（2の場合もあります）のまま変更されませんでした。

あなたはplunkr、あなたが達成しようとしているものの画像を追加することができます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>