我需要在div
内定位div
,我会变得疯狂。我在网上阅读了很多文档,但在嵌入relative
时,我仍然不清楚absolute
和div
定位的行为。
某人came up包含以下内容:
我发现理解绝对定位的最好方法是 position:relative看起来是“下游”到子元素和 position:absolute看起来是父元素的“上游”。那就是 你告诉HTML元素绝对定位,它会发生 向上查找其父元素,直到找到一个设置为 位置:相对,并将基于此定位自己。如果它 没有找到一个,它将自己定位于 默认情况下。
这适用于所有浏览器吗?这是一个完整的解释吗?
我的问题是我在几个div
中嵌入了多个div
。我需要将一个孩子div
置于父div
内,具有高精度(例如前33,左9)。父div
可以嵌入到父父div
中,也可以高精度等等...
如何为所有浏览器解决此问题?我应该创建一个超级relative
父div
,div
的整个层次结构应该定位为absolute
吗?
修改
根据目前的答案,我还有一个额外的问题:是否必须在每个relative
中明确声明absolute
或div
位置以使定位工作?换句话说,如果div没有relative
或absolute
位置,那么在计算位置时不会将其考虑在内?
对于记录
上述问题的答案是肯定的。
答案 0 :(得分:2)
我将再次重复以下一段
我发现理解绝对定位的最好方法是 position:relative看起来是“下游”到子元素和 position:absolute看起来是父元素的“上游”。那就是 你告诉HTML元素绝对定位,它会发生 向上查找其父元素,直到找到一个设置为 位置:相对,并将基于此定位自己。如果它 没有找到一个,它会相对于by来定位 默认值。
是的,你需要有一个相对于你的绝对父母的位置,比如身体,稍后你可以让你的元素相对于父元素绝对定位。
当涉及到不同的屏幕分辨率时,绝对位置绝对是一种痛苦。
但是要走的路是父母的相对位置,然后是孩子的绝对。
答案 1 :(得分:2)
我发现这种方式更容易理解:
如果某个项目为position: relative
,则顶部,底部,左侧,右侧位置的任何样式设置都与该项目在普通布局流程中的位置有关。所以:
position: relative;
top: 10px;
将项目压低10px,使其低于普通HTML布局中的项目。
如果某个项目为position:absolute
,那么如果没有父母符合该条件,则该项目相对于position: relative
或position: absolute
或相对于body元素的最近父项而言。例如,如果直接父级是“position:relative”而子级是:
position: absolute;
top: 10px;
left: 10px;
然后,对象将从父级的左上角向下和向右定位10px。当一个对象为position: absolute
时,它将从页面布局中删除,并且不会影响任何其他对象的布局(除了它自己的子对象)。
例如,如果你想在容器对象中将三个图像放在另一个上面(也许你可以在幻灯片中循环播放它们,你可以使用这个CSS:
.container {position: relative; height: 100px; width: 133px;}
.container img {position: absolute; top: 0; left: 0;}
答案 2 :(得分:1)
我是否应该创建一个超级相对父div,div的整个层次结构应该从哪个div位置为绝对?
是。每个绝对定位的元素将定位在其最接近的祖先内,该祖先本身绝对或相对定位。