DIV 内的元素位于其下方

发布于 2024-09-11 17:11:07 字数 356 浏览 1 评论 0原文

我不小心删除了有关此问题的问题。

我有以下 HTML：

<div id="frame">
    <img src="sample.png" alt="" />
</div>

CSS：

#frame { position: relative; z-index: 2; }
#frame img { position: relative; z-index: 1; }

我想要做的是将图像的父 DIV 放置在顶部（它是一个框架）。 CSS 似乎没有做到这一点，但为什么呢？我怎样才能做到这一点？

原文

I accidentally deleted my question about this.

I have the following HTML:

<div id="frame">
    <img src="sample.png" alt="" />
</div>

CSS:

#frame { position: relative; z-index: 2; }
#frame img { position: relative; z-index: 1; }

What I'm trying to do, is get the image's parent DIV to be positioned on top (it's a frame). It seems the CSS doesn't do it, but why? How can I make this work?

分享到QQ

分享到微博

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

发布评论

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

勿挽旧人 2024-09-18 17:11:07

当然，元素的子元素将比其父元素具有更高的堆叠顺序（html 元素的子元素必须在 html 的顶部可见，依此类推）。

您可以通过在 img 上设置 z-index -1 来抵消这种自然行为。

编辑：为什么你不能只包含其他“内容”和/或使用另一个包装器？将是理想的解决方案。否则你就在黑客攻击并试图绕过自然的堆叠顺序行为，这意味着就是这样

<div id="parent">
    <div id="frame"></div>
    <div id="child"></div>
</div>

编辑＃2：猜猜我一直都是对的，z-index为-1有效还有： http://jsfiddle.net/yBH2G/1/

Children of elements will have a higher stacking order than their parents, naturally ( children of the html element must be visible on TOP of html, and so forth ).

You may be able to offset this natural behavior by setting a z-index of -1 on the img.

EDIT: Why can't you just enclose the other "content" and/or use another wrapper? Would be the ideal solution. Otherwise you're hacking and trying to go around natural stacking order behaviour, which is meant to be that way

<div id="parent">
    <div id="frame"></div>
    <div id="child"></div>
</div>

Edit #2: Guess I was right all along, z-index of -1 works as well: http://jsfiddle.net/yBH2G/1/

回复收藏 0 原文

黒涩兲箜 2024-09-18 17:11:07

给父 div 设置一个高度，看看会发生什么。

回复收藏 0 原文

梦中的蝴蝶 2024-09-18 17:11:07

为什么不将“框架”和图像放在 div 本身内。

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

Why not put the "frame" and image inside a div itself.

#box img, #box #frame {
    position:relative;
}
#box #frame {
    z-index: 100;
}

<div id="box">
    <div id="frame"></div>
    <img src='image.jpg' />
</div>

回复收藏 0 原文

风铃鹿 2024-09-18 17:11:07

您可以实现您想要的目标（可能无法在较旧的浏览器中工作）：

#frame { ... no special css (but background should be [semi-]transparent) ... }
#frame img { position: relative; z-index: -1; }

请注意负 z-index 数字。这就是为什么某些浏览器会出现问题，但所有现代浏览器都能很好地处理这个问题。

@Edit：这是一个适用于 Firefox 3.6、IE8、Safari 4 的测试用例（IE6 和 7 不需要包含元素有位置，即必须是 position: static 才能获得它工作）；

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div>
</div>

You can achieve what you want (may not work in older browsers):

#frame { ... no special css (but background should be [semi-]transparent) ... }
#frame img { position: relative; z-index: -1; }

Note the negative z-index number. This is why some browsers have issues, but all modern browsers handle this just fine.

@Edit: Here's a test case that works in Firefox 3.6, IE8, Safari 4 (IE6 & 7 need to not have the containing element have position, that is, it must be position: static to get it to work);

<div style="border: 5px solid red; width: 190px; height: 190px; position: relative; zoom: 1; margin: 20px">Example Text
<div style="position: absolute; z-index: -1; width: 200px; height: 200px; background-color: blue; opacity: .7; top: -10px;"></div>
</div>

回复收藏 0 原文

~没有更多了~