10

我的 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，但这不会居中。我应该如何解决这个问题？

4

4 回答 4

12

你的 CSS 应该是

.bgimage { position: relative; }

.content { position: absolute; }

因此 .content 将相对于 .bgimage 定位，您当前的 CSS 使 .bgimage 相对于文档的位置。

看到这个关于 CSS 定位的链接

于 2010-03-27T03:26:08.963 回答
4

z-index与定位无关：它只影响元素的渲染顺序。Position: relative告诉浏览器在它应该在的位置渲染元素，并通过最终left的right,top或bottom坐标偏移它。因此，边距、填充等仍然会影响它。

只position: absolute保证位置独立。

于 2010-03-27T01:59:53.240 回答
3

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.

To center the background on the 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

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".

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"
于 2010-03-27T05:12:18.483 回答
1

CSS绝对定位总是相对于最近的具有“位置：相对”的祖先进行，否则默认使用body标签。如果您包含的 CSS 会影响这些 div，那么您的 .content div 将相对于 .main div 定位，但您的 .bgImage 将基于标签定位。

如果您希望 .content 和 .bgImage 同步移动，则需要向 div.main 添加“位置：相对”。

于 2010-03-27T02:47:50.330 回答