css定位的区别
程序员文章站
2024-01-29 18:12:34
...
我在今年二月三日参加逆战班的学习，开始学习前端，目前学习了三周，想在这里总结一下关于定位position的知识点。
定位有五种形式，position:static;默认，position:relative;相对定位，position:absolute;绝对定位，position:fixed;固定定位，position:sticky;黏性定位。
四个定位偏移量：left、top、right、bottom，以像素为单位，意为从xx边偏移xx像素，也可以写百分比%，必须配合定位使用。
1、position:static;
static是position属性的默认值。如果不写position属性，该元素就是static定位。定位偏移量无效。
2、position:relative;相对定位
相对定位是相对于自身位置发生偏移，如果没有定位偏移量，对元素本身没有任何影响。相对定位不会使元素脱离文档流，偏移后原本位置依然占位，且不影响其他元素布局。这里偏移量不可以写百分比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{margin: 0; padding: 0;}
#box1{width: 100px;height: 100px;background-color: red;}
#box2{width: 100px;height: 100px;background-color: blue;position: relative; left: 100px; top: 100px;}
#box3{width: 100px;height: 100px;background-color: green;}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
相对定位向左向下各偏移100像素
3、position:absolute;绝对定位
绝对定位是相对于离自己最近的有定位的祖先发生偏移，若没有祖先有定位属性，则相对于整个页面偏移，它使元素完全脱离文档流，影响其他元素布局。这里偏移量百分比是离自己最近的有定位的祖先的，将上述代码的相对定位换成绝对定位，偏移量不变，结果是：
4、position:fixed;固定定位
固定定位是相对于整个浏览器窗口进行偏移，是固定在浏览器窗口的，不受浏览器滚动条和祖先元素的影响，即使页面滚动它也不会移动在窗口的位置。这里偏移量百分比是窗口大小的，它会使元素脱离文档流。
5、position:sticky;黏性定位
粘性定位与固定定位有相似之处，定位元素在没有到达页面指定位置的时候可以移动，初始位置是在浏览器默认的位置，在到达指定位置的时候就变成固定定位，在指定位置粘住。这里的偏移量百分比是窗口大小的，但是当祖先元素随滚动条滚动消失时 ，该元素会随祖先元素一同消失。