一、CSS绝对定位与相对定位的区别
1、绝对定位和相对定位都可以控制元素在页面上的位置，但二者的定位方式和影响范围有所不同。
2、相对定位是相对于元素本身所在位置来进行定位，可以通过top、bottom、left、right属性的设定来控制元素所在位置的偏移量，影响仅限于该元素所在的文本流中。
.box {
position: relative; /*相对定位*/
top: 20px;
left: 50px;
}
3、绝对定位是相对于距离自身最近的已定位的祖先元素，如果不存在已定位的祖先元素，则相对于文档的body元素来进行定位。可以通过top、bottom、left、right属性的设定来控制元素所在位置的偏移量，影响范围比相对定位更广泛。
.box {
position: absolute; /*绝对定位*/
top: 20px;
left: 50px;
}
二、相对定位、绝对定位和固定定位的区别
1、固定定位是指元素相对于浏览器视窗的位置进行定位，不会随着滚动条的滚动而变化。
.box {
position: fixed; /*固定定位*/
top: 20px;
left: 50px;
}
2、相对定位、绝对定位和固定定位在使用时需要注意以下几点差异：
3、相对定位是相对于元素本身所在位置来进行定位，而绝对定位和固定定位是相对于祖先元素和浏览器视窗来进行定位，所以在使用时需要对祖先元素和浏览器视窗的大小进行适当的考虑。
.relative-box {
position: relative;
width: 400px;
height: 300px;
}
.absolute-box {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
}
.fixed-box {
position: fixed;
width: 200px;
height: 200px;
bottom: 50px;
right: 50px;
}
4、另外，相对定位、绝对定位和固定定位在文档流中的位置也有所不同，相对定位不会改变元素在文档流中的位置，但是绝对定位和固定定位会将元素从文档流中拖出来，可能会对其他元素造成影响，需要进行一定的页面布局规划。
三、使用示例
.relative-box {
position: relative;
width: 400px;
height: 300px;
}
.absolute-box {
position: absolute;
width: 200px;
height: 200px;
top: 50px;
left: 50px;
}
.fixed-box {
position: fixed;
width: 200px;
height: 200px;
bottom: 50px;
right: 50px;
}
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/193535.html
微信扫一扫 
支付宝扫一扫 