CSS div放置圖像時不會干擾其他div

我正在爲我的教堂創建一個網站。因爲他們不知道網絡程序員，所以我用我微薄的技能來照顧它。我的問題只是安置的一個問題。我試圖在頁面的左上方放置一個圖像，但不管我做什麼，它都會干擾頁面上的其他div元素。這是我目前的CSS：CSS div放置圖像時不會干擾其他div

body { 
background-color: #FFFFFF; 
font-size:12px; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
} 
div#wrapper { 
width: 90%; 
background-color:#ffffff; 
margin-top: 50px; 
margin-bottom: 50px; 
margin-left: auto; 
margin-right: auto; 
padding: 0px; 
border: thin solid blue; 
} 
div#image { 
padding: 15px; 
margin: 0px; 
float: left; 
} 
div#header { 
padding: 15px; 
margin: 0px; 
text-align: center; 
} 
div#nav { 
width: 25%; 
padding: 10px; 
margin-top: 100px; 
float: left; 
} 
div#main { 
margin-left: 30%; 
margin-top: 100px; 
padding: 10px; 
} 
div#footer { 
padding: 15px; 
margin: 0px; 
border-top: thin solid blue; 
text-align: center; 
}

無論我如何定義圖像DIV，它總是推爲主，導航和標題的div不對齊。如果我只是將圖像放在另一個div中，它仍然會讓事情移動。

有沒有什麼辦法讓頁面居中90％的寬度和包裝div的一切，也有右上角的圖像？如果它需要不同類型的東西，有人可以幫我弄清楚嗎？某些只能在一個瀏覽器中工作的東西將無濟於事，因爲我希望它能爲大多數人無縫地工作。

來源

2009-10-04 Joshua Nurczyk

你可能會希望使用絕對定位，

#image { position:absolute; top:0; left:0; }

然而，這將需要保持相對的包裝：

#wrapper { position:relative; }

雖然我猜嚴格，提供更多的信息和你會得到一個更確切的解決方案。

來源

2009-10-04 02:28:54

這幾乎就是我正在尋找的東西，除了有什麼方法可以使圖像不在0,0,10,10嗎？我試着把它改成top：10; left：10;但它根本沒有動。 – 2009-10-04 02:49:32

..指定單位。 10什麼？像素？然後'10px' – 2009-10-04 03:02:58

謝謝，我不敢相信我沒有注意到... – 2009-10-04 03:04:01

使用z-index將圖像放在更高層。

http://www.w3schools.com/Css/pr_pos_z-index.asp

這樣，沒有別的被感動。

來源

2009-10-04 02:29:55

假設他在談論#image，它首先需要一個非靜態的位置，以便z-index的堆疊順序效果能夠發生。 – 2009-10-04 02:32:28

這是真的，我忘了提及那部分。 – 2009-10-04 02:59:06

如果你不希望它影響頁面上的其他內容，我可以檢查它不是背景圖片嗎？如果它不是，那麼你有沒有試過製作它是一個背景圖片？這樣它就不會/不會影響文檔流，因爲它而沒有任何東西會被移動。

雖然如果你已經有一個背景圖像，它可能會使事情稍微複雜一點。

來源

2009-10-04 02:32:47

CSS div放置圖像時不會干擾其他div

回答

相關問題