position 值的研究

矫情吗；* 2022-04-13 12:49 187阅读 0赞

position有四个属性值：

1.relative

2.absolute

3.fixed

4.static

不设置Position的值，top，left，right，bottom，不起作用，但是设置了position:static也不会起作用。

先来说一下最简单的两个值

1.static

这是position的默认值，也就是不设定position或者设定position:static都不会对这个div（或者别的标签）的布局有影响，它会在它原本应该在的位置。所以无论设置不设置position:static，top，left，right，bottom，都不会起作用。

2、fixed，固定定位类似于absolute

就是fixed它是固定定位嘛，**也就是脱离了原来的文档流，浮在在上面的一层，而且固定不变。（那么当后面有元素的时候就会盖住后面的元素）**

就像我们浏览一些网站的顶部有个导航栏，一般这个导航栏无论你怎么滚动鼠标，它都还是固定在那个位置。

fixed总是以浏览器的可视串口进行定位（也就是不管鼠标怎么滚动，它的位置都会一直在窗口的那个位置，不会变化）。

这个地方不是以html的body来定位。该属性来设计网站顶部菜单随着滚动条移动位置而固定住非常有用

![20181129144818624.png][]

这是还没有设置fixed的时候的效果

![20181129144818757.png][]

这是设置了fixed的效果，可以看到，static的div已经被fixed盖住了。因为fixed脱离了文档流，不占用位置，那么这个位置就会给到后面的元素。而fixed又在上面一层，所以就覆盖掉了static

3.relative，**相对定位是不会脱离文档流，也就是无论你怎么设置它的位置偏移它都是在文档流里面的。**

相对位移，它是相对于它本身的位置进行偏移**的。也就是当设置了position:reltive之后，top,left ,bottom,right才会起作用。如果此时设置偏移，**位置不会被占用，会被保留下来。定位的起始位置为此元素原先在文档流的位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1][]

从上面的结果可以看到，当relative元素设置了

top: 200px;

left: 200px;

之后，位置会有一定的偏移，但是他的位置仍然被保留下来了。

4.absolute。相对定位**，脱离文档流的布局，就是这个位置空间已经不在文档流中占有位置了，所以它原来的位置会被它后来的元素所占领，****定位的起始位置为最近的父元素(postion不为static)，否则为Body文档本身。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3][]

从上面的结果可以看到，当absolute设置了一定的偏移量之后，它的位置就会被后来的元素所占用。

从这里也可以看出当absolute设置了之后，它就会脱离文档流，那么这个位置就会被后来的位置所占领，但是absolute虽然脱离了文档流，但是它所在的层是在最上面，那么这个时候就会盖住它后面的元素了。

[20181129144818624.png]: /images/20220413/ce46ac317e7e4d47bab7a0e5f487356c.png
[20181129144818757.png]: /images/20220413/64dbde67d3f74bc99a11287215ccd087.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181129144818796.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 1]: /images/20220413/4b0594631d4543d7b674222ce1c242e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20181129144818819.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2tyeXNsaWFuZw_size_16_color_FFFFFF_t_70 3]: /images/20220413/bc3aa1b6a22149ab9d4ae75a144166aa.png