Html 使用 z-index 在 Div 之上的 Div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2527782/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Div on top of Div using z-index
提问by Iacks
I have the following divs in my HTML:
我的 HTML 中有以下 div：
<div class="main">
<div class="bgimage"></div>
<div class="content">Text</div>
which is directly inside my body.
这是直接在我的身体内。
With the following CSS:
使用以下 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);
}
Basically, I have a Div that with a display of a background image, and I will have another Div on top of this with transparency. This current code works, but my problem is when I am trying to take the content div down from the top.
基本上，我有一个显示背景图像的 Div，并且我将在此之上有另一个具有透明度的 Div。此当前代码有效，但我的问题是当我试图从顶部向下取内容 div 时。
When I add margin-top:100px, for example, is also brings the image down. I thought it would not touch it if it is not on the same z-index? Why does adding a margin also force the bgimage div down?
例如，当我添加margin-top:100px 时，也会降低图像。我认为如果它不在同一个 z-index 上，它就不会碰它？为什么添加边距也会迫使 bgimage div 向下？
I have also tried making the div with class of content a position of absolute and a zindex, but then this won't centre. How should I solve this?
我也试过使内容类的 div 成为绝对位置和 zindex，但这不会居中。我应该如何解决这个问题？
回答by pixeltocode
your CSS should be
你的 CSS 应该是
.bgimage { position: relative; }
.content { position: absolute; }
so the .content will be positioned relative to the .bgimage your current CSS makes the .bgimage position relative to the document.
因此 .content 将相对于 .bgimage 定位，您当前的 CSS 使 .bgimage 相对于文档的位置。
see this linkon CSS positioning
请参阅有关 CSS 定位的此链接
回答by zneak
z-indexhas no relation to positioning: it only affects the rendering order of your elements. Position: relativetells the browser to render the element at the place it should be, and offset it by eventual left, right, topor bottomcoordinates. Therefore, margins, paddings, etc. still affect it.
z-index与定位无关：它只影响元素的渲染顺序。Position: relative告诉浏览器渲染它应该待的地方元素，并最终抵消它left，right，top或bottom坐标。因此，边距、填充等仍然会影响它。
Only position: absoluteguarantees position independance.
只position: absolute保证位置独立。
回答by David
I see no need for "z-index"es or "position: absolute" in your code at all -- unless you have other complications that you have not revealed to us.
我认为您的代码中根本不需要“z-index”es 或“position: absolute”——除非您有其他未向我们透露的复杂情况。
To center the background on the DIV class="main":
将背景放在 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;}
The "center top" places the center-top of the background image on the center-top of the element it's applied to. You may want to apply a
“中心顶部”将背景图像的中心顶部放置在它所应用到的元素的中心顶部。你可能想申请一个
min-width:1024px;_width:1024px;
to the same element -- to prevent a narrower window from hiding the edges (this will change how the element is rendered if the "viewport" is narrower than the background's dimensions).
到同一个元素——防止更窄的窗口隐藏边缘（如果“视口”比背景尺寸窄，这将改变元素的呈现方式）。
The only thing your pre-modified code it can do that my modified code can't:
您的预修改代码可以做的唯一一件事是我修改后的代码不能：
- Crop the background image (if it is not natively 1024px x 768px) by using the css "width" and "height" properties
- If the class="main" element already has a background image set, most browsers don't support the CSS3 required to stack multiple backgrounds on the same element
- 使用 css“宽度”和“高度”属性裁剪背景图像（如果它不是本机 1024px x 768px）
- 如果 class="main" 元素已经设置了背景图像，则大多数浏览器不支持在同一元素上堆叠多个背景所需的 CSS3
Some of what was stated about "z-indexing" and the "position" property above was correct but failed to mention: you've taken your class="content" element out of "the flow". The ancestor elements won't grow when the content of class="content" element grows. This is an important and fundamental difference between "z-index"ed elements and elements that remain "in the flow".
上面关于“z-indexing”和“position”属性的一些说明是正确的，但没有提及：您已经将 class="content" 元素从“流程”中取出。当 class="content" 元素的内容增长时，祖先元素不会增长。这是“z-index”ed 元素和保持“在流中”的元素之间的重要和根本区别。
Other side notes:
其他边注：
- elements with the same z-index are stacked according to their order in the HTML (later in the HTML means they are drawn above on the screen)
- "z-index"ing requires "position: (absolute|relative)", "z-index: (valid value)", and IIRC "(top|left|bottom|right): (valid value)" to take the element "out of the flow"
- 具有相同 z-index 的元素根据它们在 HTML 中的顺序堆叠（后来在 HTML 中意味着它们被绘制在屏幕上方）
- "z-index"ing 需要 "position: (absolute|relative)", "z-index: (valid value)" 和 IIRC "(top|left|bottom|right): (valid value)" 来获取元素“走出去”
回答by Marc B
CSS absolute positioning is always done "relative" to the most recent ancestor that has a "position: relative", otherwise it uses the body tag by default. If the CSS you included is all that affects those divs, then your .content div will be positioned relative to the .main div, but your .bgImage will be positioned based on the tag.
CSS 绝对定位总是“相对”于具有“position:relative”的最近祖先，否则默认使用 body 标记。如果您包含的 CSS 是影响这些 div 的全部内容，那么您的 .content div 将相对于 .main div 定位，但您的 .bgImage 将根据标签定位。
If you want both .content and .bgImage to move in lockstep, then you'll need to add a "position: relative" to div.main.
如果您希望 .content 和 .bgImage 同步移动，那么您需要向 div.main 添加一个“位置：相对”。
