position 是CSS中非常重要的属性，顾名思义，他是用来指定一个元素在页面上的位置，搞懂了position的属性值对布局的理解会更加透彻。

position一共有5个值，分别是：

static

relative

fixed

absolute

sticky

static 是 position 的默认值，如果元素没有指定position，那么他的值就是默认的static定位。他会按照正常的文档流从上到下，从左到右放置每个元素。

relative、absolute、fiexed 都是相对于某个点进行定位，只是他们的参照点不一样。此外这三种定位都不影响其他元素的位置。

相对定位 relative

相对定位是相对于元素在文档流中的初始位置根据left、top、right、bottom 四个方向进行移动。移动后，原来的空间还被占用，同时可能会覆盖其他的元素。

假设有两个div，初始位置如下：

现在给div1设置如下相对位置：

.div1 {

position: relative;

top: 20px;

left: 20px;

}

相对初始位置距离顶部下移20px，距离左侧向右移动 20px。最终效果图如下

这时，div2的位置没变，而div1往右下方移动后遮盖了div2.

绝对定位 absolute

决对定位是相对于已定位的最近的祖先元素位置进行移动。它会脱离文档流，不占据空间。因此其它元素会移动到该元素原来所在的位置去。因为该元素已经脱离了文档流。同时它还可能会覆盖其它元素，可以通过z-index 属性决定谁显示在最前面，值越大越显示在前面。

注意上面加粗的"已定位"三个字，相对的是“已定位”的祖先元素，意味着祖先元素必须不能是static属性的定位，否则继续往外层找已定位的祖先，直到根元素

看下面这个例子：

div1 和 div2 是子元素，div0是父元素

样式：

.d0{

background-color: cornflowerblue;

width:200px;

}

.d1{

background-color: cadetblue;

width: 100px;

}

.d2 {

background-color: coral;

width: 100px;

}

现在我们把div1使用绝对定位，分别离左侧往右20px，离顶部往下移动2px；

.d1{

background-color: cadetblue;

width: 100px;

position: absolute;

left:20px;

top: 2px;

}

你会发现div1跑到了父元素div0的上面去了，这不和上面说的不一样了。不是说它是相对于最近的祖先元素进行移动吗？按理说我们要的效果是这样的

那是因为父元素div0的定位属性是默认的static，解决办法也简单，我们给div0指定 position: relative 就行。 这时，div1 就是基于父元素div0右下方移动了。

固定定位 fixed

固定定位是绝对定位中的一种特殊情况，它是相对整个视窗viewport(浏览器窗口)进行移动。它表现出来的特点就是，不管页面的元素有多少，它始固定在那个位置。很多网站的导航栏始终置顶在浏览器窗口上面，用的就是基于固定定位实现的。

我们将上面例子的div1的position 改为固定定位 fiexed 后的效果就是这样

position: fixed;

无论怎么改变窗口大小或者拉动滚动条，它总会显示在固定的位置，而其它元素是跟着窗口一起动的。

sticky

sticky 是‘粘贴“的意思，是relative 于 fiexed 的结合体，当元素还在窗口出现时，表现为relative， 当元素欲要离开窗口时，表现为 fiexed，被固定在某个位置。

先看下效果

相信你在一些网页中有体验过这种操作。

.container {

position: relative;

}

h1 {

background: green;

margin: 10px;

position: sticky;

position: -webkit-sticky;

top:0px;

}

p{

line-height: 70px;

}

总结一下

relative 是相对于元素原来的位置移动， absolute 是相对于定位的父元素移动， fiexed 是相对视窗移动。 相对的“对象”一个比一个大。

参考链接：

https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/

有问题可以扫描二维码和我交流

关注公众号「Python之禅」，回复「1024」免费获取Python资源