使用 Z-index,边距无法将 div 推离另一个
我编辑了这篇文章,用更简单易懂的方式写了我的问题。请看下文。
我正在使用的一些CSS:
#wing_right
{
background-image:url("../images/poppadom.png");
height:678px;
margin-right:-60px;
margin-left: 500px;
position:fixed;
right:0;
top:240px;
width:387px;
z-index:50;
}
问题的更容易理解的版本。我希望。
以下是我的网站的示意图。 -> |LW|CN|RW| LW = 左翼 CN = 内容 RW = 右翼。左右翼的 CSS 非常相似。请参阅上面的 CSS,唯一的区别是图像及其附加到左翼。内容在 z-index 方面低于并且不能被翅膀覆盖。就像非常简单的图表一样,LW 和 RW 随着浏览器大小的调整而移动,这正是我想要的。但是,当您缩小浏览器窗口时,我需要一些东西来防止 LW 和 RW 覆盖内容。两个侧翼都位于相同的 z 索引上,内容位于较低的 z 索引上。
I have edited this post with my question writen in a more simple way to understand. Please see below.
Some CSS I am using:
#wing_right
{
background-image:url("../images/poppadom.png");
height:678px;
margin-right:-60px;
margin-left: 500px;
position:fixed;
right:0;
top:240px;
width:387px;
z-index:50;
}
Easier version of the question to understand. I hope.
Following is a diagram representation of my site. -> |LW|CN|RW| LW = Left wing CN = Content RW = Right wing. The left and right wing have very simliar CSS. See the CSS above only difference being the image and its attached to the left wing. The content is below in terms of z-index and can't be covered by the wings. Like the very simple diagram the LW and RW move with browser resizing which is what I want. However when you make the browser window smaller I need something to prevent the LW and RW covering the content. Both wings are on the same z-index and content is on a lower z-index.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
较低级别的内容是否具有固定宽度还是自动的?如果它是自动的,那么这听起来是正确的行为。您可以将最小宽度应用于您不希望被左侧和右侧图像“模糊”的图层。
Does the lower level content have a fixed width or is it automatic? If it's automatic, that sounds like the correct behavior. You could apply a minimum width to the layer you do not want "smushed" by the left and right side images.
该元素的定位不是相对或静态的,因此它不是“在流中”,因此
margin
不会影响任何其他 div。请发布一个完整的示例,因为这是一个非常涉及视觉的问题。That element is positioned not relatively or statically so it's not "in the flow" and thus the
margin
won't affect any other div. Please post a full example, as this is a very visually involved issue.