在两个相对定位的 div 上使用 z-index 时出现问题
我找到了这个问题的很多“几乎”答案，但没有任何帮助我的具体问题......
我有一个网页，其中有一个居中的#content-wrapper，宽度为1024px。我想要的是在这个包装器后面放置另一个 div，它也居中且稍宽 - 原因是我有一个图形，我想在 #content-wrapper 的左侧运行，但我需要我的 #content-wrapper保持 1024px 宽。我无法将此图形放在正文背景中或绝对定位它，因为我需要它在调整浏览器大小时与 #content-wrapper 一起移动。
所以我的问题是，我相对定位了 #content-wrapper 和较大的 div（称为 #prints），并对两者应用了 z 索引。但是，除非我对 #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);
}
I have found a lot of "almost" answers for this question, but nothing to help my specific problem...
I have a web page with a centered #content-wrapper that is 1024px wide. What I would like is to have another div positioned behind this wrapper that is also centered and slightly wider - reason being that I have a graphic I want running down the left side of the #content-wrapper, but I need my #content-wrapper to stay 1024px wide. I can't put this graphic in the body background or absolutely position it, because I need it to move along with the #content-wrapper when the browser is resized.
So my problem is, I have relatively positioned both the #content-wrapper and the larger div, which is called #prints, and applied z-indexes to both. However, unless I apply absolute positioning to #prints, it acts like a floated element and jumps above my #content-wrapper. I have tried setting the body position to relative, but that doesn't help.
I need to know if there's a way to do this, or if I am just frustrating myself trying to do something that won't work?
My (simplified) markup is below. 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);
}
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
为什么不这样做呢？
并使里面的两个 div 向左浮动，并相应地调整“打印”大小，以便 div 保持内联。
Why not do it like this?
and have the two divs inside float left, and 'prints' sized accordingly so the divs stay inline.
听起来你想要这样的东西。 http://jsfiddle.net/PD6HK/
通过将 #content-wrapper 嵌套在 #prints 中，您可以完成以下任务：
1.#prints位于#content-wrapper后面
2. #prints 比 #content-wrapper 稍宽
3. #prints 和 #content-wrapper 都居中并随浏览器窗口移动
如果是我，我会尝试这样的 http://jsfiddle.net/PD6HK/1/，听起来它基本上做了你上面想要的同样的事情，但没有 #prints 。当然，由于 #content-wrapper 上的填充，内容不会“完全”居中。
It sounds like you want something like this. http://jsfiddle.net/PD6HK/
By nesting the #content-wrapper inside the #prints you accomplish the following:
1. #prints is located behind #content-wrapper
2. #prints is slightly wider than #content-wrapper
3. Both #prints and #content-wrapper are centered and move with the browser window
If it was me, I would try something like this http://jsfiddle.net/PD6HK/1/, that sounds like it basically does the same thing you wanted above but without the #prints . Granted the content will not be "exactly" centered due to the padding on the #content-wrapper .