HTML中position的属性值介绍

?这篇文章给大家介绍的文章内容是对于HTML中position的属性值介绍，有非常不错的参照 价值，但愿可以帮忙到有需要的伴侣。 这篇文章给大家介绍的文章内容是对于HTML中position的属性值介绍，有非常不错的参照 价值，但愿可以帮忙到有需要的伴侣。

理论上来说，全部 position 的取值有8个

包含：position：static | relative | absolute | fixed | sticky | initial | inherit | unset

其中最常用的是 static 、relative、absolute、fixed 和 sticky

initial、inherit、unset 是css的关键字，任何css属性的取值都可以设定这几个值

position: static

默许值，在正常流中，对设定的 top 、left、right、bottom、z-index 一应忽略

position: relative

相对定位，相关于本人本来的位置偏移，（例：top: 10px; // 挪移后元素顶部位于原位置顶部下10px;）

离开文档流，但在文档流中保存原位置的空间（预留空间），

也就是说，元素本来位置会不断保存空白占位，相邻兄弟元素会维持本来的位置，不会随元素的挪移而转变

注意：position: relative 对 table-*-group，table-row，table-column，table-cell，table-caption 元素无效。

栗子：

position: initial

initial 关键字用于设定CSS属性为它的默许值（在这里也就是 position: static）

注： IE不支撑该关键字

position: inherit

每个 CSS 属性定义的概述都指出了这个属性是默许继承的 ("Inherited: Yes") 还是默许不继承的 ("Inherited: no")。

对于 inherit 的妙用可以看看这里：谈谈一些有味的CSS问题（四）– 从倒影提及，谈谈 CSS 继承 inherit

position: unset

unset 关键字是 initial 和inherit 的组合:

1. 要是该属性是默许继承属性，则该值等同于 inherit

2. 要是该属性是非继承属性，则该值等同于 initial