position: absolute;_JS——那些年我们一起用过的position

css中元素的层模型主要是由position这个属性来决定的。

position大家一定不陌生吧，就是定位，position的作用也是给相关的元素施加定位，它一共有四个值，分别是：static、absolute、relative、fixed.

1、static

position的默认属性，在我们没有进行任何position设置的时候，元素默认的定位就是static定位。

2、absolute

absolute绝对定位。它会使元素脱离文档流。就好像立交桥一样出现的空间分层，当元素脱离文档流之后，其他的元素就会看不到这个元素。

在我们设置了position：absolute的时候，left、top、right、bottom这四个属性也就可以发挥作用了，是设置当前的元素距离上左下右的距离是多少。一般情况下，这四个值都是成双入队·的。left和top是一对，right和bottom是一对。

1-1-0

如上图所示，这个div脱离了文档流，距离浏览器上边框和左边框分别为100px;

注意，设置了absolute的元素，参照物是距离它最近的有定位(除了static)的父级，当父级没有定位是，相对于浏览器边框进行定位。

3、relative

relative相对定位，它让元素保留原来的位置在进行定位，后面的元素是可以看到它原来的位置的。

设置了relative，left、top、right、bottom这四个属性就相对性元素自身移动了。

relative的参照物是元素本身。

注意：当设置了relative，并没有设置left、top等四值的时候，元素是不发生任何改变的，因此，一般就把absolute和relative相结合进行应用。也就是传说中的父相子绝。

fixed

fixed性对于视口进行的定位，不随着滚动条的滚动而进行位置的变化。

也就是说，固定在浏览器视口，不会发生改变。

fixed定位

今天的定位就到这里，希望大家对这块知识有所了解。