2 个相对定位的 div?
我有一个具有相对定位的容器 div,然后里面的另一个 div 也具有相对定位:
<div class="first">
<div class="second">
<img src="img.jpg" />
</div>
</div>
我希望具有绝对定位的图像相对于“第二个”div 而不是“第一个”。但我需要它们都具有相对定位,如何指定图像相对于“第二个”div?
I have a container div that has relative positioning, then another div inside that also has relative positioning:
<div class="first">
<div class="second">
<img src="img.jpg" />
</div>
</div>
I would like an image with absolute positioning to be relative to the "second" div not the "first". But I need them both to have relative positioning, how do I specify so the image is relative to the "second" div?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
在页面层次结构中,图像将相对于 .second;但是,您必须将父母定义为相对适合孩子照顾的位置。
请参阅:http://css-tricks.com/absolute-positioning-inside-相对定位/
In the page hierarchy the image would be relative to .second; however, you must define the parent to be relatively positioned for the child to care.
see: http://css-tricks.com/absolute-positioning-inside-relative-positioning/
根据 CSS 标准,它自动相对于第二个
,因为它嵌套在第二个
中并且该 div 已定位。以下是CSS2 标准的引用:
,因此您在 DOM 树中向上计数,即从最近的祖先到文档根,并在第一个定位的祖先处停止(如果没有,则它是最近的容器,但这不适用于此处)。在本例中,这将是您想要的
div.second
。It is relative to the second
<div>
automatically according to the CSS standards, since it is nested in the second<div>
and that div is positioned. Here is a quote from the CSS2 standard:So you count upwards in the DOM tree, i.e. from the nearest ancestor towards the document root, and stop at the first positioned ancestor (and if there isn't one, then it's the closest container, but that doesn't apply here). In this case, that will be
div.second
like you want.定位仅是示例;您可以更改它以满足您的需要。
The positioning is just an example; you can change it to suit your needs.