CSS - Divsをオーバーレイする

Question

これはよくある質問ですが、私はそれに対して簡単なQ-Aを見つけることはできません。

は、私は次のような構造を持っていると言う - 私は itemAにオーバーレイする itemBを取得するために実装する必要が何をすべきかCSSトリック：

<div id="parent"> 

    <div id="itemA"> 
     Lorem 
    </div> 

    <div id="itemB"> 
     Ipsum 
    </div> 

</div> 

Answer 1

使用このCSSはitemAにitemBをオーバーレイします。

divの両方がページ上の同じ位置に配置されるようにマークされています。また、itemAdivをitemBでオーバーライドするには、itemBのz-indexはitemAより大きい必要があります。

#parent{ 
     width: 100px; 
     height: 100px; 
     position: relative; 
    } 
    #itemA, 
    #itemB{ 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 
    #itemB{ 
     z-index: 10; 
    } 

Answer 2

単にposition: relative/absoluteを適用し、left/right/top/bottomを使用するよりも、要素を移動すること。

relative - 通常のDOMフローから要素を取得せず、予約領域を保持し、他の要素を意味しますは、この要素位置によって影響を受けます。
absolute - DOMから要素を取り出し、彼のためにスペースを予約しないでください。他の要素を意味します。は、この要素の位置に影響されません。

使用z-indexz方向（アップまたはダウンスタック）内に配置要素を移動するための

#itemA { 
 
    background-color: rgba(200, 200, 250, .7); 
 
    position: relative; 
 
    top: 30px; 
 
} 
 
#itemB { 
 
    background-color: rgba(200, 250, 200, .7); 
 
    z-index: 6 
 
}

<div id="parent"> 
 

 
    <div id="itemA"> 
 
    Lorem 
 
    </div> 
 

 
    <div id="itemB"> 
 
    Ipsum 
 
    </div> 
 

 
</div>

Answer 3

このスタイルを追加します：あなたが探しているものを

#itemB{ 
    position:absolute; 
    top:0; 
    left:0; 
    opacity:0.5; 
} 

Answer 4

はpositioningです。

cssには、「position」というプロパティがあります。この場合、itemBの位置を絶対値に設定する必要があります。 Absoluteは、親に対して相対的な位置に置かれることを意味します（親には相対的な位置を設定する必要がありますが、それ以外の場合は機能しません）。

次に、上、下、左、右：{ピクセル数}ピクセルを設定できます。しかしそれをあなたが望むところに置く。この場合、itemAはitemBに全く影響しません。