コンテナーの位置に浮動要素がバックグラウンドで消えてしまいます。

Question

<style>タグに含まれているCSSを使用して、問題は非常に単純な単一ファイルになっています。 問題は次のとおりです。 テキストと写真を表示するために、透明な背景を持つ浮動小数点列があります。これは正常に動作します。

ここでは、フッターのすぐ上にある「....によって設計されたサイト」ブロックを配置します。

#content divに対して相対的な位置に配置されたdivの絶対位置を使用したいと思います。これを達成するためにはposition:relativeプロパティを取得する必要があります。

このプロパティを設定すると、浮動する右の列が消え、#contentブロックの背景画像の内側に隠れているようです。

私はこれについての説明を見つけることができません。回避策は、フッターを基準にして配置することです（この場合、#footer divはposition:relativeプロパティを取得します）。

しかし、ここで何が問題になるのか、なぜ浮動列が隠されているのかを理解したいと思います。相対配置されたコンテンツdivがないレイアウトのリンクを参照してください。

相対的な位置付けがない場合、テキストはブラウザの左下隅に配置されます。あなたは、ほとんどがあった

http://websites.drsklaus.nl/relativeproblem/index_withoutrelative.html

http://websites.drsklaus.nl/relativeproblem/index_withrelative.html

Answer 1

！それを終わらせるためにちょっと助けてください。

#main { 
    width: 1005px; 
    margin: 20px auto; /* shorthand margin for x and y axis */ 
    border: solid black 1px; 
    /* Added background to main instead so it still covers the full background */ 
    background-image: url('grey-repeating-background-4.jpg'); 
} 

#content { 
    position: relative; 
    min-height: 500px; 
    /* made the padding here margin, made it slightly bigger to accomedate the right column */ 
    margin: 5px 370px 5px 5px; /* Margin right should be as wide as the right column+extra space */ 
} 

コンテンツの後ろに隠れるためにあなたの右の列の理由は、あなたがそれにposition:relative;を置く前に、それは、通常の流れではない「位置」であるので、Zインデックスの優先順位がちょうどDOMの順序によって実際にあるということです。それを配置するだけで、ずっと大事になった。右の列を隠す。