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

如题所述

第1个回答  2021-10-25

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的第三个不同点)。