position定位有哪几种？各有什么特点

大家好，我是IT修真院郑州分院第6期的学员王栋，一枚正直、纯洁、善良的前端程序员

今天给大家分享一下，修真院官网CSS（职业）任务4，深度思考中的知识点——Position定位有哪几种？各有什么特点

1.背景介绍

浏览器在渲染页面时是根据元素在代码出现的先后顺序读取，元素最终的呈现方式是根据元素的 盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。 如果不改变元素的默认样式，元素在HTML的文档流中会占用一个位置，而占用位置大小，位置所在 是由position属性决定的。

position在css中是一个很常见的属性，我们很多时候都需要对元素进行定位，让他们确定一个位 置，这个位置根据需求的不同可能是相对于自己原来的位置，也有可能是相对于自己的父元素，其他元素， 或者窗口本身。

2.知识剖析

CSS的position属性设置元素的定位方式，为将要定位的元素定义定位规则。 position的属性值有以下四种

1.position:static;

2.position:relative;

3.position:absolute;

4.position:fixed;

position:static;这是position属性的默认值，元素属性没有写这个 值的话，会按照正常的文档流排列。

position:relative;这个定位是相对定位。 在没有给予元素相对定位属性以前，元素在文档流中有一个位置。在赋予元素relative属性后 ，元素会有对应的偏移，此时元素原来的位置为空白，其他元素不会占用这个位置。元素本身仍 保持其定位前的形状和所占用的空间。 relative一般伴随着top,left,bottom,right出现。

position:absolute;这是绝对定位，元素被设置为absolute，它就会 脱离文档流，紧挨着它的子元素就会占据它原来的空间。

absolute是生成绝对定位的元素， 可以选取具有定位的父级对象或者body坐标原点进行定位，也可以通过z-index进行层次分级。 absolute在没有设定TRBL值时是根据自己在父级元素的原来的位置作为参考始点的，也就是待着不动 当设定TRBL值后则开始往上级查找定位的参考对象，一直查找到body级。

讲到绝对定位就就不得不提浮动。 一旦给元素加上absolute或float就相当于给元素加上了display:block;什么意思呢？ 比如内联元素span默认宽度是自适应的，你给其加上width是不起作用的。要想width定宽，你需要将span设成display:block。 但如果你给span加上absolute或float，那span的display属性自动就变成block，就可以指定width了。 因此如果看到CSS里absolute/float和display:block同时出现，那display:block就是多余的CSS代码。

position：absolute与position：relative的配合使用，当我们使用position:absolute的时候一般会给它的父级元素加上一句 position：relative，给定位一个参考对象，一般情况下是这么用的，也没什么毛病，但是万一父级元素不方便设置position：relative时怎么办 怎么单独让子元素绝对定位到父元素的某个位置，跟父元素一起飞呢？

答案就是：用position：absolute，然后用margin调整位置而不用top bottom left right 。子元素的定位对象点还是父元素， 但是父元素不用写position：relative ，是不是很机智

position:fixed;这是固定定位，元素表现与position:absolute;相同 但是参考对象是以浏览器视窗为参考对象。

3.常见问题

1.position的各种属性值都如何表现的。

2.position：absolute怎么水平垂直居中比较快

4.解决方案

1.通过设置TBRL（top bottom right left）值

2.用margin：auto，也就是所谓的绝对居中，注意设置BTLR为0

5.实战

6.扩展思考

1.fixed属性一般都用来做什么？

2.position：absolute还有什么常见用法？

7.参考文献

参考一：position-MDN

参考二：学习CSS布局

参考三：css权威指南

8.更多讨论

绝对定位absolute能否有什么非绝对定位的应用

鸣谢

感谢大家

position定位有哪几种？各有什么特点_腾讯视频

BY : 王栋