使用 Z-index,边距无法将 div 推离另一个

发布于 2024-09-12 07:15:57 字数 550 浏览 3 评论 0原文

我编辑了这篇文章,用更简单易懂的方式写了我的问题。请看下文。

我正在使用的一些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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

小苏打饼 2024-09-19 07:15:57

较低级别的内容是否具有固定宽度还是自动的?如果它是自动的,那么这听起来是正确的行为。您可以将最小宽度应用于您不希望被左侧和右侧图像“模糊”的图层。

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.

执妄 2024-09-19 07:15:57

该元素的定位不是相对或静态的,因此它不是“在流中”,因此 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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文