position 属性的常用的5种取值(转载)
作者：互联网
日期：2020 年 6 月 22 日
position 属性
前言
说到 CSS 的 position 属性，大家都知道也都用过，但是要说它有几个取值以及这些值的不同，可能有部分同学会哑口无言，毕竟这不影响日常开发（手动狗头），身为一名有梦想的程序员，我们应该秉承刨根问底的钻研精神，不能浅尝辄止、不求甚解，万丈高楼平地起，基础才是万物之根，基础知识掌握了，后面的学起来也会更容易
废话不多说，正文开始
小序
position 属性的取值有：static | relative | absolute | fixed | sticky | inherit | initial | unset
其中 inherit、initial、unset 3个是 css 关键字，任何 css 属性的取值都可以设置这几个值，
那么剩下的 5 种就是我们要讲的，也是常用的 5 种：
static、relative、absolute、fixed、sticky
下面结合实例讲一讲它们的实际效果与区别
1、stctic
static 是 position 的默认属性值，当 position 为 static 的时候，left | right | top | bottom 属性无效，也就是当没有设置 position 属性的时候，会默认为是：
position: static; 如果我们直接设置成 position: static; 效果也是一样的，如下：
没有设置 position 属性
将 position 属性设置为 static ，效果与上面一样
2、relative
当 position 为 relative 的时候，如果设置了 left 、right、top、bottom 属性，它们会生效，发生偏移时的参照为 position 属性取 static 时盒子的位置，如下：
3、absolute
当 position 为 absolute 的时候，元素会被移出正常文档流，并不为元素预留空间，元素相对于最近的非 static 定位祖先元素发生偏移，如下：
当元素没有非 static 定位祖先时，会相对 html 发生偏移：
4、fixed
当 position 为 fixed 的时候，元素会被移出正常文档流，并不为元素预留空间，元素相对于屏幕视口（viewport）的 位置来发生偏移, 元素的位置在屏幕滚动时不会改变，这一点与 absolute 不同，absolute 在屏幕滚动时会跟着一起滚动，如下：
5、sticky
sticky 定位，或者叫粘性定位，可以被认为是 relative 和 fixed 的混合，元素在跨越特定阈值前为相对定位，之后为固定定位。
也就是说 sticky 会让元素在页面滚动时如同在正常流中（relative定位），但当滚动到特定位置时就会固定在屏幕上如同 fixed ，这个特定位置就是指定的top、right、bottom、left 4个阈值其中之一
sticky定位的阈值是相对它的最近滚动祖先来定义的，而 sticky 的作用区域也是它的第一个非static父元素内，也就是说粘性布局的效果只在该父元素内表现出来，这里放一段代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>position</title>
<style>
.c-box{
width: 200px;
height: 50px;
background: lightsalmon;
border: 1px solid #000;
line-height: 50px;
text-align: center;
}
.p-container{
width: 250px;
height: 300px;
border: 1px solid #333;
overflow-y: scroll;
}
.container{
width: 250px;
list-style: none;
padding: 0;
margin: 0;
background: lightgray;
border: 1px solid #000;
position: relative;
}
.h-item{
width: 250px;
height: 30px;
background: royalblue;
position: sticky;
top: 0;
}
.item{
width: 250px;
height: 20px;
background: lightskyblue;
border: 1px solid #ddd;
}
</style>
</head>
<body>
<div class="c-box">我是参照物（200 x 50）</div>
<div class="p-container">
<ul class="container">
<li class="h-item">#A</li>
<li class="item">art</li>
<li class="item">artice</li>
<li class="item">address</li>
<li class="item">ant</li>
<li class="item">andy</li>
</ul>
<ul class="container">
<li class="h-item">#B</li>
<li class="item">belong</li>
<li class="item">basketball</li>
<li class="item">body</li>
<li class="item">block</li>
</ul>
<ul class="container">
<li class="h-item">#C</li>
<li class="item">canvas</li>
<li class="item">circle</li>
<li class="item">container</li>
</ul>
<ul class="container">
<li class="h-item">#D</li>
<li class="item">dance</li>
<li class="item">detail</li>
<li class="item">disco</li>
</ul>
<ul class="container">
<li class="h-item">#E</li>
<li class="item">edit</li>
<li class="item">edge</li>
<li class="item">element</li>
</ul>
<ul class="container">
<li class="h-item">#F</li>
<li class="item">father</li>
<li class="item">fashion</li>
<li class="item">fantastic</li>
</ul>
</div>
</body>
</html>
看一下效果：
这里目标元素（sticky 定位的元素）为每个列表的第一项，它的阈值是 top: 0, 注意这里的 top: 0 是相对离它最近的滚动祖先，也就是它的爷爷（图中带滚动条的box), 而它的作用范围是它的第一个非 static 祖先，也就是 ul 元素，所以整体的效果就是，当蓝色的 li 元素距离最外层 box 顶部距离为 0 时， 它就会固定在 ul 中它当前所处的位置，直到 ul 滚出 box ，它也会随之滚出去
以上纯属个人总结，如有错误，还请批评指正！
原文链接:https://blog.csdn.net/qq_41306423/article/details/106912112?
标签：元素,sticky,relative,static,position,转载,取值,属性 来源： https://blog.csdn.net/qq_43649223/article/details/121865579