相对和绝对定位如何与嵌入式div一起使用?

时间:2011-12-22 05:54:56

标签: javascript css html css-position

我需要在div内定位div,我会变得疯狂。我在网上阅读了很多文档,但在嵌入relative时,我仍然不清楚absolutediv定位的行为。

某人came up包含以下内容:

  

我发现理解绝对定位的最好方法是   position:relative看起来是“下游”到子元素和   position:absolute看起来是父元素的“上游”。那就是   你告诉HTML元素绝对定位,它会发生   向上查找其父元素,直到找到一个设置为   位置:相对,并将基于此定位自己。如果它   没有找到一个,它将自己定位于   默认情况下。

这适用于所有浏览器吗?这是一个完整的解释吗?

我的问题是我在几个div中嵌入了多个div。我需要将一个孩子div置于父div内,具有高精度(例如前33,左9)。父div可以嵌入到父父div中,也可以高精度等等...

如何为所有浏览器解决此问题?我应该创建一个超级relativedivdiv的整个层次结构应该定位为absolute吗?

修改

根据目前的答案,我还有一个额外的问题:是否必须在每个relative中明确声明absolutediv位置以使定位工作?换句话说,如果div没有relativeabsolute位置,那么在计算位置时不会将其考虑在内?

对于记录

上述问题的答案是肯定的。

3 个答案:

答案 0 :(得分:2)

我将再次重复以下一段

  

我发现理解绝对定位的最好方法是   position:relative看起来是“下游”到子元素和   position:absolute看起来是父元素的“上游”。那就是   你告诉HTML元素绝对定位,它会发生   向上查找其父元素,直到找到一个设置为   位置:相对,并将基于此定位自己。如果它   没有找到一个,它会相对于by来定位   默认值。

是的,你需要有一个相对于你的绝对父母的位置,比如身体,稍后你可以让你的元素相对于父元素绝对定位。

当涉及到不同的屏幕分辨率时,绝对位置绝对是一种痛苦。

但是要走的路是父母的相对位置,然后是孩子的绝对。

答案 1 :(得分:2)

我发现这种方式更容易理解:

如果某个项目为position: relative,则顶部,底部,左侧,右侧位置的任何样式设置都与该项目在普通布局流程中的位置有关。所以:

position: relative;
top: 10px;

将项目压低10px,使其低于普通HTML布局中的项目。

如果某个项目为position:absolute,那么如果没有父母符合该条件,则该项目相对于position: relativeposition: 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位置为绝对?

是。每个绝对定位的元素将定位在其最接近的祖先内,该祖先本身绝对或相对定位。