當容器有位置時，浮動元素消失在背景後面：相對

我將問題歸結爲一個非常簡單的單個文件，其中CSS包含在<style>標記中。問題是：我有一個浮動的右列，透明背景顯示一些文字和圖片。如預期的那樣，這工作正常。當容器有位置時，浮動元素消失在背景後面：相對

現在我想定位一個「站點由...設計」塊在頁腳之上。

我想用一個絕對定位div這一點，這是相對於定位於包含#content 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

來源

2012-03-26 klausch

你幾乎沒有！ Heres有點幫助完成它。

#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-index優先實際上只是通過DOM順序。定位它使它變得更加重要;遮蔽右欄。

來源

2012-03-26 21:15:50 sg3s

非常感謝你！這使得這個頁面看起來確實很好！但還有一個問題，在我的製作頁面中，標題具有自己的背景圖像，而內容部分的另一個背景圖像正是爲此目的而設計的。所以我仍然在尋找一種方法來給內容部分提供自己的背景圖片，並且不會隱藏浮動的右列... 我試圖將右列設置爲高Z-索引，但這沒有效果。還有什麼建議？ – klausch 2012-03-26 21:32:36

是的，你需要一些更多的標記來實現:)使用div包裝'＃rightcolumn'和'＃content'，給它一個背景圖像和一個'overflow：hidden;'來清除它（在這裏閱讀更多內容： http://www.quirksmode.org/css/clearing.html） – sg3s 2012-03-26 21:39:12

再次感謝，我試過了，它似乎是一個可行的解決方案！即使沒有溢出：隱藏屬性設置它看起來很好。我從來沒有使用過這個屬性，因爲我從來沒有很好地理解它，但似乎並不需要這裏。順便說一句，我只用Firefox測試。 – klausch 2012-03-26 21:59:16

當容器有位置時，浮動元素消失在背景後面：相對

回答

相關問題