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

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

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

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

返回
顶部

效果图如下：

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

• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 网站栏目
• 

  2.相对定位

  格式：

  position:relative

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

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

  特点：

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

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

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

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

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

  注意：

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

  3.绝对定位

  语法：

  position:absolute;

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

  解释：

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

  特点：

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

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

  • 绝对定位元素它会压盖住标准文档流中的元素。

  • 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里什么定位都可以(三种定位)，但是一般我们只会使用相对定位。

  例如：以下便是一个相对定位和绝对定位的例子

  最后

  正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

  特点：

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

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

  • 绝对定位元素它会压盖住标准文档流中的元素。

  • 绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里什么定位都可以(三种定位)，但是一般我们只会使用相对定位。

  例如：以下便是一个相对定位和绝对定位的例子

  最后

  正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！