position属性的简单介绍

position属性值有哪些

position属性值有static、relative、absolute、fixed、sticky。

1、static：该关键字指定元素使用正常的布局行为，即元素在文档常规流中当前的布局位置。

2、relative：该关键字下，元素先放置在未添加定位时的位置，再在不改变页面布局的前提下调整元素位置（因此会在此元素未添加定位时所在位置留下空白）。

3、absolute：是不为元素预留空间，通过指定元素相对于最近的非static定位祖先元素的偏移，来确定元素位置。

4、fixed：是指不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。

5、sticky：盒位置根据正常流计算，然后相对于该元素在流中的 flow root（BFC）和 containing block（最近的块级祖先元素）定位。在所有情况下（即便被定位元素为table 时），该元素定位均不对后续元素造成影响。

参考资料来源：百度百科-position

css的position的属性有哪些

position 属性指定了元素的定位类型。它有五个属性，分别是

static：HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

relative：相对定位元素的定位是相对其正常位置。

fixed：元素的位置相对于浏览器窗口是固定位置。注：即使窗口是滚动的也不会移动

absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于html。注：定位使元素的位置与文档流无关，因此不占据空间。定位的元素和其他元素重叠。

sticky：基于用户的滚动位置来定位。粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

position属性有哪4种取值?有何区别?

Position属性有以下四个取值：

static：静态定位，是position属性的默认值，表示无论怎么设置top、bottom、right、left属性元素的位置（与外部位置）都不会发生改变；

relative：相对定位，表示用top、bottom、right、left属性可以设置元素相对与其相对于初始位置的相对位置；

absolute：绝对定位，表示用top、bottom、right、left属性可以设置元素相对于其父元素（除了设置了static的父元素以外）左上角的位置，如果父元素设置了static，子元素会继续追溯到祖辈元素一直到body；

fixed：绝对定位，相对于浏览器窗口进行定位，同样是使用top、bottom、right、left。

其实fixed和absolute是一样的，唯一的区别在于：absolute元素是根据最近的定位上下文确定位置，而fixed永远根据浏览器确定位置。

在这里要注意别跟Fixed值混淆，absolute并不是永远根据浏览器窗口进行定位的，这是Fixed的特性，absolute要更加复杂：

一般情况下以父级的左上角定位，在没有父级的时候，他是参照浏览器左上角（这与relative完全一致）；

如果在没有父级元素的情况下，存在文本，则以它前面的最后一个文字的右上角为原点进行定位但是不断开文字，覆盖于上方（这里是与relative的第二个不同点）；

如果父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由偏移设置(top、bottom、left、right)决定（这与relative完全一致）；

如果父级设定position属性(无论是absolute还是relative)，则以父级的左上角为原点进行定位，位置由偏移设置(top、bottom、left、right)决定（这与relative完全一致）；

即使父级有Padding属性，对其也不起作用，说简单点就是：它只坚持一点，就以父级左上角为原点进行定位，父级的padding对其根 本没有影响（这里是与relative的第三个不同点）。