CSS中的position属性

目录

1. position的定义及各属性值

2. 各属性值详解

static

relative

absolute

fixed

sticky

3. 其他

relative与absolute的主要区别

什么是文档流

z-index属性

---

1. position的定义及各属性值

position 设置元素的定位类型，其属性值有以下几种：

• static（静态定位）：positon属性默认值，该定位的元素出现在正常的文档流中。

• relative（相对定位）：相对于其正常（原先本身）位置进行定位。

• absolute（绝对定位）：相对于 static 定位以外的第一个父元素进行定位。

• fixed（固定定位）：相对于浏览器窗口进行定位。

• sticky（粘性定位）：相对于用户滚动的位置。

• inherit（继承）：从父元素继承 position 属性的值。

本文以下 top、right、bottom、left 属性均简称TRBL。

	TRBL	z-index
static（静态定位）	×	×
relative（相对定位）	√	√
absolute（绝对定位）	√	√
fixed（固定定位）	√	√
sticky（粘性定位）	√	√
inherit（继承）	随父级	随父级

2. 各属性值详解

• static

默认值，暂无解析

• relative

TRBL属性改变的位置是相对于该元素原文档流的位置。top优先级高于bottom，left优先级高于right。

脱离正常的文本流中，但其在文本流中的位置依然存在。

• absolute

脱离正常的文档流中，且原文档流中的位置也不存在。

1、当absolute定位的元素没有设置TRBL属性时，与原文档流位置保持相同。

2. TRBL属性改变的位置是相对于该元素第一个不是static 定位的父元素的，如不存在则以浏览器框口。top优先级高于bottom，left优先级高于right。

• fixed

TRBL属性改变的位置是相对于浏览器窗口的位置，滚动也不会改变。top优先级高于bottom，left优先级高于right。

• sticky

可以看做position:relative和position:fixed的结合体——当元素在屏幕内，表现为relative，就要滚出显示器屏幕的时候，表现为fixed。以下gif中head是sticky定位的：

1. TRBL属性设置的是该元素距离浏览器窗口多少数值时，如同fixed一般固定定位。如bottom: 20px就是距离浏览器底部20px时固定。

2. sticky定位元素的父级必须是overflow:visible，否则sticky无效。

3. 其他

• relative与absolute的主要区别

首先，是上面已经提到过的在正常流中的位置存在与否。

其次，relative定位的层总是相对于其最近的父元素，无论其父元素是何种定位方式。如图3：

图中，红色背景层为relative定位，其直接父元素绿色背景层为默认的static定位。红色背景层的位置为相对绿色背景层top、left个20元素。而如果红色背景层定位为absolute，则情形如下：

 

 

可 以看到，红色背景层依然定义top:20px；left:20px；但其相对的元素变为定位方式为absolute或relative的黄色背景层。因 此，对于absolute定位的层总是相对于其最近的定义为absolute或relative的父层，而这个父层并不一定是其直接父层。如果其父层中都未定义absolute或relative，则其将相对body进行定位，如图：

 

除top、left、right、bottom定位外，margin属性值的定义也符合上述规则。

总结：

属性为relative的元素可以用来布局页面，属性为absolute的元素用来定位某元素在父级中的位置，既然属性为absolute的元素用来定位某元素在父级中位置，就少不了TRBL，这时候根据一开始讲的absolute的第三条，如果父级元素没有position属性那么 absolute元素就会脱离父级元素，但是如果是布局页面，父级元素position的属性又不能为absolute，不然就会以浏览器左上角为原点 了，所以父级元素的position属性只能为relative！

如果用position来布局页面，父级元素的position属性必须为relative，而定位于父级内部某个位置的元素，最好用 absolute，因为它不受父级元素的padding的属性影响，当然你也可以用position，不过到时候计算的时候不要忘记padding的值

Note : 绝对(absolute)定位对象在可视区域之外会导致滚动条出现。而放置相对(relative)定位对象在可视区域之外，滚动条不会出现。

• 什么是文档流

      将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流。

      如何使得元素脱离文档流：浮动，绝对定位和相对定位。

• z-index属性

       z-index，又称为对象的层叠顺序，它用一个整数来定义堆叠的层次，整数值越大，则被层叠在越上面，当然这是指同级元素间的堆叠，如果两个对象的此属 性具有同样的值，那么将依据它们在HTML文档中流的顺序层叠，写在后面的将会覆盖前面的。需要注意的是，父子关系是无法用z-index来设定上下关系 的，一定是子级在上父级在下。

Note：使用static 定位或无position定位的元素z-index属性是无效的。