5

一个简化的例子：

HTML：

<div id="A">
    <div id="B"></div>
    <div id="C"></div>
    <div id="D"></div>
</div>

CSS：

#A,#B,#C,#D{width:100px;height:100px}
#A{position:relative;width:220px;top:20px;left:20px;background:#FF0000}
#B{position:absolute;top:0;left:0;background:#FFFF00}
#C{position:absolute;top:10px;left:80px;background:#00FF00}
#D{position:absolute;background:#00FFFF;top:0;right:0}

作为小提琴：http: //jsfiddle.net/h6BNz/

OK 所以C是在前面B和后面D，并且相对于 定位A。我想将它相对于文档定位，但将它保持在 B 和 D 之间（在 z-index 和 tab 顺序中）。如果C的位置更改为position:fixed，它完全符合我的要求，除了（显然）不随页面滚动。

我已经看到很多解决方案涉及将 div 从其父级中分离出来以实现此目的，但这需要设置 z-indices 和 tab 顺序，这似乎是管理的噩梦（这是一个插件，所以周围的代码在外面我的控制）。

如何在不破坏or或改变结构的情况下给出C真正的绝对位置？JavaScript 可以很好地设置它，但我需要完美地舍入最终页面位置（如果您对为什么感兴趣，请参阅我的其他一些问题），所以我认为我不能使用方法。BDabsolutePosition - absolutePositionOfContainer

4

1 回答 1

6

如果里面#A有position: relative任何东西，它将相对于#A.

所以#B #C和#D都将被#A. 如果它在某个位置的内部，则不能相对于文档定位它。

您可以使用负边距将其放置在 之外#A，但前提#A是 has overflow: visible。

于 2013-04-18T16:19:32.957 回答