position表示位置的意思，它主要是用于实现对元素的定位。
在CSS中定位分为三种：
-
position:fixed(固定定位)
-
position:relative(相对定位)
-
position:absolute(绝对定位)
left: 表示定位的元素离左边多远。
right: 表示定位的元素离右边多远。
top: 表示定位的元素离上边多远。
bottom: 表示定位的元素离下边多远。
1.固定定位
语法格式：
position:fixed
固定定位，它是相对于浏览器窗口来进行定位。不管页面如何滚动，固定定位元素显示的位置不会改变。
特点：
-
固定定位元素它脱离了标准文档流。
-
固定定位元素的层级比标准文档流里面的元素要高，所以固定定位元素它会压盖住标准文档流里面的元素。
-
固定定位元素它不再占用空间。
-
固定定位元素它显示的位置不会随着浏览器的滚动而滚动。
案例一：使用固定定位来实现返回顶部的按钮。
*{ margin: 0px; padding: 0px; } a{ width: 60px; height: 60px; display: block; background-color: #ccc; text-align: center; line-height: 30px; /*这里因为是两行，随意取60px的一半就可以*/ text-decoration: none; color: white; font-weight: bold; position: fixed; right: 30px; bottom: 100px; }
效果图如下：
同样比较常见的有顶部的导航栏，也是这种方式做的：
*{ margin: 0px; padding:0px; } .nav{ width: 100%; height: 60px; background-color: skyblue; position: fixed; left: 0px; top: 0px; } .nav .inner_c{ width: 1000px; height: 60px; margin: 0px auto; } ul{ list-style: none; } ul li{ float: left; width: 100px; height: 60px; line-height: 60px; text-align: center; } ul li a{ display: block; width: 100px; height: 60px; text-decoration: none; color: white; font-weight: bold; } ul li a:hover{ background-color: gold; } .aa{ margin-top: 60px; }
2.相对定位
格式：
position:relative
相对定位它是相对于“原来的自己(也就是没有position这个属性之前的位置)”来进行定位。
例如：top 6px;意思就是向上移动6px就是不添加position的值。
特点：
-
相对定位元素它没有脱离标准文档流。
-
相对定位元素如果没有设置定位的坐标，那么相对定位元素它还在原来的位置。
-
相对定位元素的定位坐标值可以是负数。
-
相对元素它会将标准文档流的元素压盖住(就是移动到一定位置)。
比较一下有postion属性和没postion的网页格式。
注意：
相对定位元素它会在老家留下一个坑，所以一般情况下，它很少单独使用，相对定位元素，它主要是用来配合"绝对定位"元素来使用的。
3.绝对定位
语法：
position:absolute;
绝对定位元素是相对于"祖先定位元素"来进行定位！
解释：
绝对定位元素，它会先去找其父元素是否设置了定位属性，如果有，则相对与父元素来进行定位；但是如果父元素没有设置定位属性，那么他会查找父元素的上一级元素是否设置了属性，如果有，则对应其父元素的上一级元素设置定位，依次往上，如果其祖先元素(最后一级)都没有定义，则它会相对于“浏览器窗口”来进行定位。
特点：
-
绝对定位元素它脱离了标准文档流。
-
绝对定位元素它不再占用空间。
-
绝对定位元素它会压盖住标准文档流中的元素。
-
绝对定位元素它会相对于其“祖先定位元素”来进行定位，这里什么定位都可以(三种定位)，但是一般我们只会使用相对定位。
例如：以下便是一个相对定位和绝对定位的例子
* { margin: 0; padding:0; } .box{ width: 600px; border: 1px solid #000; ### 文末 逆水行舟不进则退，所以大家要有危机意识。 同样是干到35岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。 这也是为什么大家都说35岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。 为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师核心知识笔记》电子稿文件。 内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。 **269页《前端大厂面试宝典》** 包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。  **前端面试题汇总**  **开源分享：https://docs.qq.com/doc/DSmRnRGxvUkxTREhO**
