html – 突破位置：相对*没有*改变结构

概述一个简化的例子： 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;b 一个简化的例子：

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/

好的,所以C在B的前面,在D的后面,并且相对于A定位.我想将它相对于文档定位,但是将它保持在B和D之间(在z-index和Tab顺序中).如果C的位置改变为位置：固定,它完全符合我的要求,除了(显然)不滚动页面.

我已经看到很多解决方案涉及打破其父级的div来实现这一点,但这需要设置z-indices和tab order,这似乎是一个噩梦来管理(这是一个插件,所以周围的代码在外面我的控制).

如何在不破坏B或D或改变结构的情况下给C一个真正的绝对位置？ JavaScript可以很好地设置它,但我需要最终页面位置完美舍入(如果你对原因感兴趣,请参阅我的其他一些问题),所以我认为我不能使用absoluteposition – absolutepositionOfContainer方法.

解决方法 如果#A有位置：相对内的任何内容都将相对于#A定位.

所以#B #C和#D都将被#A包含.如果文档位于具有位置的内容中,则无法将其相对于文档定位.

您可以使用负边距将其置于#A之外,但是,如果#A有溢出：可见.

总结

以上是内存溢出为你收集整理的html – 突破位置：相对*没有*改变结构全部内容，希望文章能够帮你解决html – 突破位置：相对*没有*改变结构所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。