515 字
3 分钟
固定定位
固定定位可以使用于很多网站上，就比如正常滚动网页的时候，正常的网页上一般都会有一个上方，左侧等等位置会有一个导航栏等东西。但是随着页面滚动之后如果是页面元素会正常向上滚动，所以为了让这个元素正常固定，就需要使用到固定定位。
概念
| 相对定位 | 绝对定位 | 固定定位 |
|---|---|---|
| 相对于元素自己本身的位置。 | 相对于非static（静态）的父元素进行移动，若没有父元素或所有父元素均为static（静态），则默认相对于浏览器窗口进行移动。 | 相对于浏览器窗口，且不会因为任何父元素的position改变而变化。 |
| 原本的元素会继续保持在原本文档流的位置不动。 | 原内容会脱离正常的文档流，会对后面的元素产生一定的影响。 | 原内容会脱离正常的文档流，会对后面的元素产生一定的影响。 |
语法格式
属性
position：默认值是static，固定定位则是fixedtop：正值：相对于父元素的上边框增加多少距离（向下移动）；负值：相对于父元素的上边框减少多少距离（向上移动）；优先级高于bottomleft：正值：相对于父元素的左边框增加多少距离（向右移动）；负值：相对于父元素的左边框减少多少距离（向左移动）；优先级高于rightbottom：正值：相对于父元素的下边框增加多少距离（向上移动）；负值：相对于父元素的下边框减少多少距离（向下移动）right：正值：相对于父元素的右边框增加多少距离（向左移动）；负值：相对于父元素的右边框减少多少距离（向右移动）z-index：层级顺序，固定定位元素高于普通文档流中元素
格式
.elements { position: fixed; top: 10px; left: 20px;}