文章目录

• 定位
• • 固定定位
  • 相对定位
  • 绝对定位
  • 粘性定位

定位

固定定位

position 规定元素的定位方式(类型) static 默认值，没有定位(写和不写一样)fixed 固定定位，会让元素生成 固定定位的元素固定定位元素 永远是根据 浏览器的显示窗口 作为 定位位置的参考起点的特点：1、固定定位会使元素脱离文档流2、元素在成为固定定位后，在没有规定固定宽度的情况下，宽高由内容撑开3、固定定位会使元素产生块级框，不论任何类型的元素使用了固定定位后就都可以设置宽高了固定定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置left/right/top/bottom 指定定位元素具体定位的位置属性值：length(数值+单位)%(固定定位：根据浏览器显示窗口的宽[left、right]和高[top、bottom]计算的百分比值)left固定定位：指定 固定定位元素的左边 距离 浏览器显示窗口的左边 的距离，正值向右，负值向左right固定定位：指定 固定定位元素的右边 距离 浏览器显示窗口的右边 的距离，正值向左，负值向右top固定定位：指定 固定定位元素的上边 距离 浏览器显示窗口的上边 的距离，正值向下，负值向上bottom固定定位：指定 固定定位元素的下边 距离 浏览器显示窗口的下边 的距离，正值向上，负值向下

上代码 上才艺 首先我们看下没有定位的时候元素是如何显示的

* {padding: 0;margin: 0;}div {width: 100px;height: 100px;background-color: green;}<div></div>

此时元素在屏幕的左上角
这时候我们给元素加上固定定位

  * {     padding: 0;     margin: 0; }     div {   width: 100px;   height: 100px;   background-color: green;   position: fixed;   bottom: 0;   left: 0;      }

这个时候元素就到左下角啦，其实在工作中我们可以用固定定位做很多东西，比如右下角的回到顶部功能，吸顶栏，
这些要配合js去操作元素的属性。等到后期讲到js的时候我们再去详细的描述

相对定位

relative 相对定位，会让元素生成 相对定位的元素相对定位元素 永远是根据 自身初始位置 作为 定位位置的参考起点的特点：1、相对定位不会使元素脱离文档流相对定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

我们还是看上面的例子，当给元素添加相对定位之后会发生什么样的变化

 div {     width: 100px;     height: 100px;     background-color: green;     position: relative;     top: 50px;     left: 50px;    }

绝对定位

position 规定元素的定位方式(类型)  position：absoluteabsolute 绝对定位，会让元素生成 绝对定位的元素绝对定位元素 是根据 离其(自身)最近并且有定位设置(static定位除外)的父元素 作为 定位位置的参考起点的最终 绝对定位元素 根据谁 作为 定位位置的参考起点，就将谁叫做 绝对定位的元素的 包含块首先 绝对定位元素 会查找 离其最近并且有定位设置的父元素 作为 包含块 使用但是如果 向上找到html标签，都没有父元素有定位设置，则中 将 html标签 视为 包含块一般情况如果希望 绝对定位元素 根据父元素定位偏移，就会给父元素 设置定位 position: relative;特点：1、绝对定位会使元素脱离文档流2、元素在成为绝对定位后，在没有规定固定宽高的情况下，宽高由内容撑开3、绝对定位会使元素产生块级框，不论任何类型的元素使用了绝对定位后就都可以设置宽高了绝对定位元素 通过 left/right/top/bottom属性 指定元素具体定位的位置

     * {     padding: 0;     margin: 0; }  .box {     width: 100px;     height: 100px;     background-color: pink; }  .box>div {     width: 100px;     height: 100px;     background-color: green;     position: absolute;     top: 50px;     left: 50px; }  <div class="box"> <div></div> </div>

绝对定位元素 是根据 离其(自身)最近并且有定位设置(static定位除外)的父元素 作为 定位位置的参考起点的，所以从上面可以看到div是根据父元素box来进行参考的

粘性定位

sticky 粘性定位--(在css3.0中新增的一种定位类型，存在比较多的兼容问题)--了解即可粘性定位是基于用户滚动的位置定位的和相对定位一样是不会使元素脱离文档流的当元素滚动到目标位置(通过top规定的值，距离浏览器显示窗口的距离)时 会和 固定定位一样 固定浏览器显示窗口的位置不动

粘性定位用的很少吧，所以这样我们不举例了

总结:今天我们主要介绍下 定位，定位在工作中还是要用的比较多的，下篇我们讲下弹性盒flex

如果大家有什么不理解的欢迎大家前来讨论    联系方式：zhang_chao96@163.com