CSS position 关于absolute方式的详细说明

lipiwang 2024-10-19 08:20 22 浏览 0 评论

static 为默认值，inherit为继承父元素的position值
把position 值设置为relative,fixed，absolute中任意一个我们就说这个元素被positioned。如果是static 我们就说元素是非position的元素

position: relative 在一个相对定位（position属性的值为relative）的元素上设置 top、 right 、 bottom 和 left 属性会使其偏离其正常位置。其他的元素的位置则不会受该元素的影响发生位置改变来弥补它偏离后剩下的空隙。
position: fixed 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙（脱离文档流）。
position:absolute

absolute 是最棘手的position值。 absolute 与 fixed 的表现类似，但是它不是相对于视窗而是相对于最近的“positioned”祖先元素。如果绝对定位（position属性的值为absolute）的元素没有“positioned”祖先元素，那么它是相对于文档的 body 元素，并且它会随着页面滚动而移动。记住一个“positioned”元素是指 position 值不是 static 的元素。 absolute元素也不会保留它原本在页面应有的空隙（脱离文档流）

样式

效果

现在思考下如何用position :absolute 将绿色元素移动到黄色颜色后面

想要的效果

首先我们写下如下代码看看有什么效果

将left设置为0

可以看出aqua是green的父元素，但是aqua 的position值为static, 而green的最近的"positioned"祖父元素为container。所以，当green的position的值为absolute时，green是基于container来定位的。

那么我们想要实现将绿色元素放到黄色元素后可以这么做：

但是这种方式需要额外的计算，我们要把黄色的width加上aqua的margin-left。如果结构简单还能计算，如果稍微复杂一些就麻烦了。所以我们可以采用将aqua父元素改成position：relative 然后再调整green的位置。

希望通过这个简单的例子让大家对absolute有更好的理解。其实也不是很复杂的嘛。

相关推荐