CSSの相対位置と要素の高さ

Question

私はある要素を別の要素の下に置いています。位置の相対値を使用して下の要素を上にドラッグして上の要素をオーバーレイします。

paperOverlay要素は、ページ上の最後の要素です（縦方向）。ブラウザウィンドウの下部まで伸びています。しかし、要素の位置を相対的に微調整することで、底部の空白が等しくなります。これを避ける方法はありますか？

HTMLは次のようになります。

div class="container"> 
    <div class="homePage"> 
     <!-- some content --> 
    </div> 
    <div class="paperOverlay" style="position: relative; top: -70px;"> 
     <!-- some more content --> 
    </div> 
</div> 

とCSSは次のようになります。

div.container 
{ 
    width: 960px; 
    margin: 0 auto; 
} 

div.homePage 
{ 
    width: 800px; 
    height: 500px; 
} 

div.paperOverlay 
{ 
    width: 960px; 
    min-height: 400px; 
    background: url('Images/Overlay.png') no-repeat top center; 
} 

基本的には、下の層は、上部に引き裂かれた紙エッジ効果と白の背景です。目標は、裂けた紙の端をその上にある要素の底に少し重ねることです。私はmargin-top: -70pxを試してみましたが、これは高さを固定しましたが、上部の要素の要素がオーバーレイの上にあり、オーバーレイを上にしたいと思います。

Answer 1

相対的な位置付けではなく、マイナスのマージンを試してください。また、なぜあなたはこれを行う必要があるのか​​、そして私たちが解決策を提案するためにCSSを投稿する必要があるのか​​を少し説明できますか？

Answer 2

paperOverlay要素の高さを設定してみてください。これは、実際の高さから相対的に移動した量を引いたものでなければなりません。

Answer 3

私はmargin-top：-70pxを試しましたが、これは高さを固定しましたが、上部要素の要素がオーバーレイの上にあり、オーバーレイを上にしたいと思います。

これを試してみてください：

div.container 
{ 
    margin: 0 auto; 
    width: 960px; 
} 

div.homePage 
{ 
    height: 500px; 
    position: relative; 
    width: 800px; 
    z-index: 1; 
} 

div.paperOverlay 
{ 
    background: url('Images/Overlay.png') no-repeat top center;   
    min-height: 400px; 
    position: relative; 
    top: -70px; 
    /* you can optionally use bottom: 70px; rather than top: -70px */ 
    width: 960px; 
    z-index: 2; 
} 

使用して位置を：相対;両方の要素で、Z-インデックスを設定すると、上の要素の上にオーバーレイが表示されます。

display：blockを試してみるとよいでしょう。折りたたみを防ぐために、固定幅/高さ（特に、divや、固定幅/高さが必要な他のコンテナ、アンカーやリスト項目など）が必要なすべての要素に適用されます。通常はブロックレベルではない要素のサイズをコンテンツに合わせて変更し、それ以外の場合は幅と高さの規則を無視します。