堆積的內容，訂購與隱藏溢出錯誤

編輯顯示當前代碼並添加html：我仍然在學習CSS，我有一點問題。我有一個頁面頂部的標題圖像。重疊圖像我有一個帶有主頁按鈕的標題欄。堆積的內容，訂購與隱藏溢出錯誤

#header {height:170px; background-color:#f5fdfb; display:block; overflow:hidden; position:relative;} 

#header_bild { 
padding-top:0px; 
height:170px; 
z-index:5; 
} 

#header_bar { 
background-image:url(header_bar.png); 
position:absolute; 
top:0px; 
left:0px; 
width:151px; 
height:31px; 
z-index:10 
}

但我希望人們在CMS能夠上傳標題圖片太大，它會被自動裁剪。我認爲我可以通過添加overflow來隱藏標頭標籤。它的工作原理。但是，只要我添加overflow：hidden，標題欄就會突然出現在標題圖像後面，而不是它所屬的頂部。誰能告訴我我做錯了什麼？

CMS中的東西實際上並沒有被我編碼。我只編輯CSS文件。所以，我只能告訴你查看網站的源文件時，我可以看到HTML：

<body> 
<div id="siteborder"> 
<div id="container"> 
<div id="header"> 
<div id="header_bar">&nbsp;</div> 
<div id="header_img"> 
<img src="./files/header_seed.jpg" border="0" title="" alt=""></div> 

</div> 
<div id="logo"><a href="http://www.thispage.net"><img src="files/dummy.gif" width="151" height="30"></a></div> 

<div id="linie_header"><img src="files/line_header.png" width="992" height="2"></div> 
</div><!-- header end -->

來源

2014-01-24 user3233917

你也可以添加HTML樣本嗎？ – RacerNerd

您可以添加HTML部分或創建一個jsFiddle嗎？ – Roman

你應該考慮在你的CSS使用z-index明確指定要「上面」什麼，應該是什麼「背後」。那裏有好的信息plenty。 z-index將較高值的對象放在值較低的對象「頂部」。如果未指定默認值是auto，這意味着它需要從它的父，其是（通常）爲0。<html>標記默認爲0 z-index這個值，所以它遵循嵌套默認也將是0

.thingone { z-index:10;} 
.thingtwo { z-index:5;} 
.thingthree { }

在這個例子中，<div class="thingone"></div>會「上的頂部」兩者他人，並<div class="thingthree"></div>將「下面」其他人，因爲它是不明確的，因此缺省爲auto（父的z-index如果嵌套，通常爲0 ）。所以，你應該添加z-index:10（舉例來說）你想在上面（如果你想「上面」的形象實際上是由header_img定義）的特定對象：

#header_img { 
    padding-top:0px; 
    height:170px; 
    position:relative; 
    z-index:10; 
} 
#header_bar { 
    background-image:url(header_bar.png); 
    position:absolute; 
    top:0px; 
    left:0px; 
    width:151px; 
    height:31px; 
    z-index:20; 
}

正如在評論中提及的Hilgaran下面，您需要明確聲明position規則，用於您嘗試使用z-index的對象。默認的position爲relative，對於未嵌套在父項下的對象，使用替代position s，因此明確指定它以使z-index函數。

來源

2014-01-24 23:54:44 L0j1k

請記住，'相對'，'絕對'或'固定'的位置屬性需要伴隨z-索引。 – Hiigaran

謝謝。我現在已經添加了z-index，但不幸的是沒有任何變化。我希望header_bar位於上方，而header_img位於下方。錯誤在於我添加了overflow：隱藏到標題標籤。但我不知道爲什麼。 – user3233917

你能編輯你的問題以包含一個包含所有相關代碼的小提琴嗎？我們需要您的HTML和CSS都能夠幫助您，但請不要將所有內容都粘貼到您的文件中，否則它會讓瀏覽更難。 – Hiigaran

堆積的內容，訂購與隱藏溢出錯誤

回答

相關問題