Div使用z-index除以Div

Question

我的HTML中有以下div：

<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>

它直接在我體內。

使用以下CSS：

body {
    margin: 0;
    padding: 20px 0;
}
.content {
    filter: alpha(opacity=50);
    -moz-opacity: 0.5;
    opacity: 0.5;
}
.content {
    position: relative;
    z-index: 1;
    border: #000 thin solid;
    width: 960px;
    margin-left: auto;
    margin-right: auto;
    background-color: #000;
}
.bgimage {
    position: absolute;
    z-index: -1;
    width: 1024px;
    height: 768px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(bg1.jpg);
}

基本上，我有一個顯示背景圖像的Div，我將在透明度上有另一個Div。 這個當前代碼有效，但我的問題是當我試圖從頂部取下內容div時。

當我添加margin-top：100px時 ，例如，也會降低圖像。 如果它不在同一個z-index上，我認為它不會碰它？ 為什么添加邊距也會迫使bgimage div下降？

我也嘗試用內容類來制作div的絕對位置和zindex，但是這不會居中。 我該怎么解決這個問題？

Answer 1

你的CSS應該是

.bgimage { position: relative; }

.content { position: absolute; }

所以.content將相對於.bgimage定位，你當前的CSS會使.bgimage相對於文檔的位置。

看到這個關於CSS定位的鏈接

Answer 2

z-index與定位無關：它只影響元素的渲染順序。 Position: relative告訴瀏覽器在應該的位置渲染元素，並通過最終的left ， right ， top或bottom坐標來偏移它。 因此，邊距，填充等仍然會影響它。

唯一的position: absolute保證位置獨立。

Answer 3

我認為你的代碼中根本不需要“z-index”或“position：absolute” - 除非你有其他的並發症，你沒有透露給我們。

要將背景置於DIV class =“main”的中心：

body{margin:0;padding:20px 0;}
.main{background:transparent url(bg1.jpg) no-repeat center top;}
.content{border:#000 thin solid;width:960px;margin-left:auto;margin-right:auto;background-color:#000;opacity: 0.5;filter:alpha(opacity=50);-moz-opacity: 0.5;}

“中心頂部”將背景圖像的中心頂部放置在應用元素的中心頂部。 你可能想申請一個

min-width:1024px;_width:1024px;

到同一個元素 - 防止較窄的窗口隱藏邊緣（如果“視口”比背景的尺寸窄，這將改變元素的渲染方式）。

您修改后的代碼唯一不能修改代碼的修改后的代碼：

• 使用css“width”和“height”屬性裁剪背景圖像（如果它本身不是1024px x 768px）
• 如果class =“main”元素已經具有背景圖像集，則大多數瀏覽器不支持在同一元素上堆疊多個背景所需的CSS3

上面提到的關於“z-indexing”和“position”屬性的一些內容是正確的，但未提及：你已經從“流程”中取出了class =“content”元素。 當class =“content”元素的內容增長時，祖先元素不會增長。 這是“z-index”ed元素和“在流程中”保留的元素之間的重要和基本區別。

其他附注：

• 具有相同z-index的元素根據它們在HTML中的順序堆疊（稍后在HTML中表示它們在屏幕上方繪制）
• “z-index”需要“position :(絕對|相對）”，“z-index :(有效值）”和IIRC“（top | left | bottom | right）:(有效值）”取元素“走出困境”

Answer 4

CSS絕對定位始終與具有“position：relative”的最新祖先“相對”完成，否則默認情況下使用body標記。 如果你包含的CSS是影響這些div的所有CSS，那么你的.content div將相對於.main div定位，但你的.bgImage將根據標記定位。

如果你想讓.content和.bgImage都以鎖步方式移動，那么你需要在div.main中添加一個“position：relative”。