Zインデックス

Question

JS Fiddle

私は2つのdiv、& Bがあります。

<div class="a"> 
    A 
</div> 
<div class="b"> 
    b 
</div> 

を私はの順序を変更したくないのdiv Bは、divのAの後ろになりたいですマークアップ。

私はz-indexを試しましたが、運はありません。

.a{ 
    background: gold; 
    height: 100px; 
    border-bottom: 2px solid red; 
    z-index: 99; 
} 
.b{ 
    background: blue; 
    position: absolute; 
    width: 100%; 
    height: calc(100% - 100px); 
    transform: translateY(-10px); 
    z-index: 98; 
} 

Answer 1

ただ、クラスB '' あなたの問題を解決しますへposition: relativeを与える

.b{ 
    background: blue; 
    position: absolute; 
    width: 100%; 
    height: calc(100% - 100px); 
    transform: translateY(-10px); 
    z-index: -1; 
} 

Answer 2

ために-1にZインデックスを変更します。 demo

z-indexはposition:relativeとのみ動作します。

.a{ 
    background: gold; 
    height: 100px; 
    border-bottom: 2px solid red; 
    z-index: 10; 
    position:relative; 
} 

.b{ 
    background: blue; 
    position: absolute; 
    width: 100%; 
    height: calc(100% - 100px); 
    transform: translateY(-10px); 
    z-index: 1; 
    top: 0; 
}