css中position初解

Posted 2020-07-09

positon:static|absolute|relative|fiexd

1、static为默认值，没有定位，元素出现在正常的文档流中，忽略left,right,top,bottom,i-index值。

2、absolute为绝对定位，通过left,top等值对元素进行定位，定位时如果父元素的position值为默认值static，就根据文档左上角的位置进行定位，如果不是就根据父元素的位置进行定位，元素脱离文档流。

3、relative为相对定位，也是通过left,top等值对元素定位，定位时根据自己当前的位置进行定位，元素没有脱离文档流。其他元素没有进行位置移动时，相对定位元素可能会和其他元素重叠。

4、fiexd为固定定位，固定定位和绝对定位很类似，但是他定位是相对于浏览器窗口，并且不会随滚动条进行滚动。也就是说，不管用户停留在页面那个地方，固定定位的元素将始终停留在页面的一个地方。固定定位最常见的一种用途就是在页面中创建一个固定头部、或者脚部、或者固定页面的一个侧面。就算是用户移动浏览器的滚动条，还是固定在页现与用户交流。