position定位

Posted 2020-10-05 啃兔子的萝卜

Position属性：static、relative、absolute、fixed

position:static　无定位

该属性值是所有元素定位的默认情况，在一般情况下，我们不需要特别的去声明它，但有时候遇到继承的情况，我们不愿意见到元素所继承的属性影响本身，从而可以用position:static取消继承，即还原元素定位的默认值。

position:relative　相对定位

相对定位是相对于元素默认的位置的定位。top、bottom、left、right四个数值配合，来明确元素的位置。

如果要让div层向下移动10px,左移20px:
我们可以这样写：div{position:relative;top:10px;left:20px;}

 

position:absolute　绝对定位

使用position:absolute，能够很准确的将元素移动到你想要的位置。

当父级position:relative时，子集position:absolute并配合top、bottom、left、right值可将子集定位在父级的指定位置。

position:fixed　相对于窗口的固定定位

在屏幕媒体如WEB浏览器中，元素在文档滚动时不会在浏览器视察中移动。