Question

我已经为这个问题找到了很多“差不多”的答案，但没有什么可以帮助我解决这个问题...

我有一个网页，其中心的＃content-wrapper宽度为1024px。我想要的是在这个包装器后面放置另一个div，它也是居中的，稍微宽一点 - 因为我有一个图形，我想在＃content-wrapper的左侧运行，但我需要我的#content-wrapper保持1024px宽。我无法将此图形放在正文背景中或绝对定位它，因为我需要它在调整浏览器大小时与＃content-wrapper一起移动。

所以我的问题是，我已经相对定位了＃content-wrapper和更大的div，它被称为#prints，并将z-indexes应用于两者。但是，除非我对#prints应用绝对定位，否则它就像一个浮动元素，并跳过我的#content-wrapper。我已经尝试将身体姿势设置为亲戚，但这没有帮助。

我需要知道是否有办法做到这一点，或者我是否只是在试图做一些无效的事情而感到沮丧？

我的（简化）标记如下。 HTML：

<body>

<div id="prints"></div>

<div id="content-wrapper">

<!-- Content here -->

</div>

</body>

CSS：

#content-wrapper {
width: 1088px;
min-height: 800px;
height: auto;
overflow: hidden;
margin: 0px auto 0px auto;
position: relative;
z-index: 99;
}

#prints {
width: 1212px;
position: relative;
z-index: -99;
margin: 0px auto 0px auto;
height: 881px;
background-image: url(images/bg-prints.png);
}

Answer 1

为什么不这样做？

<div id="prints"> //the div behind
  <div id="left-side-graphic"> </div>
  <div id="content-wrapper"> </div>
</div>

并且左边有两个div，并且'print'相应地调整大小，以便div保持内联。

Answer 2

听起来你想要这样的东西。 http://jsfiddle.net/PD6HK/ 通过在#prints中嵌入＃content-wrapper，您可以完成以下任务： 1. #prints位于＃content-wrapper后面 2. #prints比＃content-wrapper略宽 3. #prints和#content-wrapper都居中并随浏览器窗口一起移动

如果是我，我会尝试这样的http://jsfiddle.net/PD6HK/1/，听起来它基本上是你想要的东西，但没有#prints。当然，由于＃content-wrapper上的填充，内容不会“完全”居中。

在两个相对定位的div上使用z-index的问题

2 个答案: