CSS 闲着无聊读一读，不知不觉学会CSS（五

[](()1.固定定位

语法格式：

position:fixed

固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变。

特点：

• 固定定位元素它脱离了标准文档流。

• 固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面的元素。

• 固定定位元素它不再占用空间。

• 固定定位元素它显示的位置不会随着浏览器的滚动而滚动。

案例一：使用固定定位来实现返回顶部的按钮。

返回
顶部

效果图如下：

同样比较常见的有顶部的导航栏，也是这种方式做的：

• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• <img 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 src=“./images/壁纸.jpg”>

  

  [](()2.相对定位

  格式：

  position:relative

  相对定位它是相对于“原来的自己(也就是没有position这个属性之前的位置)”来进行定位。

  例如：top 6px;意思就是向上移动6px就是不添加position的值。

  特点：

  • 相对定位元素它没有脱离标准文档流。

  • 相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置。

  • 相对定位元素的定位坐标值可以是负数。

  • 相对元素它会将标准文档流的元素压盖住(就是移动到一定位置)。

  比较一下有postion属性和没postion的网页格式。

  注意：

  相对定位元素它会在老家留下一个坑，所以一般情况下，它很少单独使用，相对定位元素，它主要是用来配合"绝对定位"元素来使用的。

  [](()3.绝对定位

  语法：

  position:absolute;

  绝对定位元素是相对于"祖先定位元素"来进行定位！

  解释：

  绝对定位元素，它会先去找其父元素是否设置了定位属性，如果有，则相对与父元素来进行定位；但是如果父元素没有设置定位属性，那么他会查找父元素的上一级元素是否设置了属性，如果有，则对应其父元素的上一级元素设置定位，依次往上，如果其祖先元素(最后一级)都没有定义，则它会相对于“浏览器窗口”来进行定位。