两个绝对定位列之间的 z 索引？

发布于 2024-11-01 00:04:23 字数 655 浏览 5 评论 0原文

我有一个两列布局，有两个“绝对”定位的 div。

    #left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    #right {
        position: absolute;
        top: 0;
        left: 0
        z-index: 0;
    }

在每一列中，我都有图像，并希望它们能够以不同的配置与 z 索引相互重叠。使用 wordpress，#left 填充来自某一类别的帖子，然后填充 #right。

是否可以将 #left 中的图像定位在 #right 中的图像之上，但不是全部？本质上 - 两个单独的 div 之间的 z 索引可以相互关联吗？

我已经为 #left 中的图像指定了高于 #right< 的 z 索引/em>，但 #right 中的图像始终位于顶部。我认为这与 #left 在代码中首先出现有关？

在此处输入图像描述

原文

I have a two-column layout with two 'absolute' positioned divs.

    #left {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 0;
    }

    #right {
        position: absolute;
        top: 0;
        left: 0
        z-index: 0;
    }

In each column I have images and would like them to be able to overlap one another in differing configurations with z-index. Using wordpress, #left is populated with posts from one category then subsequently, #right is populated.

Is it possible for an image from #left to be positioned above an image in #right but not all? In essence - can the z-indexes between two separate divs be relative to one another?

I have assigned z-index for images in #left higher than that of #right, but images in #right are always on top. I assume it is something to do with the fact that #left appears first in the code?

enter image description here

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

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

凤舞天涯 2024-11-08 00:04:23

不会。

一旦将position:absolute放在这些容器上，每个容器都会建立自己的“堆叠上下文”，并且其中的元素将仅相对于彼此进行z轴定位。 TimKadlec.com -- 详细有关于堆叠上下文的很好的解释看看 CSS 中的堆叠

回复收藏 0 原文

森林很绿却致人迷途 2024-11-08 00:04:23

如果 div 可以选择 position:relative 那么类似这样的东西就可以工作

http ://jsfiddle.net/pxfunc/ZRCke/

HTML：

<div id="left">
    <img id="l1" src="http://placehold.it/300x200/f00" />
    <img id="l2" src="http://placehold.it/80x150/f00" />
    <img id="l3" src="http://placehold.it/150x100/f00" />
</div>
<div id="right">
    <img id="r1" src="http://placehold.it/250/00f" />
    <img id="r2" src="http://placehold.it/250x150/00f" />
</div>

CSS：

#left {position: relative;width:50%;}
#right {position: relative;margin-left:50%;width:50%;}
div img {position: absolute;}

#l1 {top: 50px;right: -50px;z-index:10}
#l2 {top: 300px;right: -10px;z-index:30}
#l3 {top: 500px;right: 20px;z-index:50}

#r1 {top:100px;left:-20px;z-index:20}
#r2 {top:400px;left:-30px;z-index:40}

如果不是，我必须接受@SnakeFaust的答案

if it's an option for the divs to be position:relative then something like this could work

http://jsfiddle.net/pxfunc/ZRCke/

HTML:

<div id="left">
    <img id="l1" src="http://placehold.it/300x200/f00" />
    <img id="l2" src="http://placehold.it/80x150/f00" />
    <img id="l3" src="http://placehold.it/150x100/f00" />
</div>
<div id="right">
    <img id="r1" src="http://placehold.it/250/00f" />
    <img id="r2" src="http://placehold.it/250x150/00f" />
</div>

CSS:

#left {position: relative;width:50%;}
#right {position: relative;margin-left:50%;width:50%;}
div img {position: absolute;}

#l1 {top: 50px;right: -50px;z-index:10}
#l2 {top: 300px;right: -10px;z-index:30}
#l3 {top: 500px;right: 20px;z-index:50}

#r1 {top:100px;left:-20px;z-index:20}
#r2 {top:400px;left:-30px;z-index:40}

if not I'd have to go with @SnakeFaust's answer

回复收藏 0 原文