css3 绝对定位相对定位

CSS3中的定位属性可以让我们在页面中精准地定位和控制元素的位置。其中绝对定位和相对定位是两种比较常用的定位方式。

相对定位是根据元素当前位置相对于起始位置进行定位的。因此相对定位不会从文档流中删除元素，并且在定位过程中元素仍然占据原来的空间。例如：

div {
    position: relative;
    top: 50px;
    left: 50px;
}

这段代码将会把该元素的位置相对于原来的位置向下移动50个像素（top属性）且向右移动50个像素（left属性）。由于这是相对于原来的位置来进行定位的，因此该元素的大小和位置并没有被改变。

绝对定位与相对定位不同，绝对定位是相对于其最近的定位的祖先元素进行定位的。如果没有定位的祖先元素，则是相对于body元素。绝对定位会使元素从文档流中删除，此时该元素不再占据原来的文档空间，因此周围的元素会重新排列。例如：

div {
    position: absolute;
    top: 50px;
    left: 50px;
}
    

这段代码将会把该元素的位置相对于距离它最近的定位祖先元素或body元素向下移动50个像素（top属性）且向右移动50个像素（left属性）。由于绝对定位的元素已被从文档流中删除，因此它不再影响其他元素的布局，其周围的其他元素将以它离开文档流前的位置对齐。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！