CSS中position属性学习笔记
<body>
<div class="box">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
</div>
</body>
<style>
body {
margin: 0;
}
div {
width: 100px;
height: 100px;
background-color: blue;
}
.box {
position: relative;
top: 100px;
left: 100px;
border: 1px solid black;
width: 50%;
height: 1500px;
background-color: white;
overflow: visible;
}
.d2 {
background-color: red;
/* position: absolute; */
top: 10px;
}
</style>
static
position的默认值，就是每个元素在文档流当中的位置。
上面示例代码中，div的position属性的默认值就是static。
效果如下：
可以看到，三个div元素（块级元素）按照顺序从上到下依次排列。
relative
relative是将元素相对自身在文档流中的位置偏移，原本的位置也会占用。
示例代码如下：
<style>
.d2 {
background-color: red;
position: relative;
top: 10px;
}
</style>
效果如下：
可以看到，当我们修改红色div的position属性为relative的时候，该div相对于自身在文档流中原本的位置进行了10px的偏移，但是并没有脱离文档流。
absolute
absolute是将元素脱离文档流，相对于父元素（依次向上找position为relative的父元素，直到body）进行偏移定位。
示例代码如下：
<style>
.d2 {
background-color: red;
position: absolute;
top: 10px;
}
</style>
效果如下：
可以看到，当我们将红色div设置为absolute的时候，由于第一个position为relative的父元素就是上层div，所以红色div就相对父元素进行了10px的偏移定位。并且脱离了原来的文档流，原来在文档流当中的位置也没有被保留。
fixed
fixed是将元素脱离文档流，相对于窗口定位。
示例代码如下：
<style>
.d2 {
background-color: red;
position: fixed;
top: 10px;
}
</style>
效果如下：
sticky
sticky，黏性定位，当距离窗口边界的位置大于预设的值时，元素处于正常的文档流当中的位置，当小于或等于预设值时，元素将被fixed在预设的值上。
示例代码如下：
<style>
.d2 {
background-color: red;
position: sticky;
top: 0px;
}
</style>
效果如下：
d-color: red;
position: sticky;
top: 0px;
}
效果如下：
[外链图片转存中...(img-ISgNDWsS-1652275261242)]
可以看到，当我们滚动时，红色div被黏住了。
扫一扫
412
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
