最熟悉的陌生属性——position

比眉伴天荒 2022-09-28 13:07 153阅读 0赞

最近更新了一下简历，不久，有一个公司发来了面试邀请。于是就过去面试了一下。其中面试官的一个问题（如题），我觉得有必要写进自己的博客。

position:有以下几个属性 static(默认) releative absolute fixed。

总所周知，position的默认属性是 static。所以通常情况下，我们都不写。也因此这个属性很少出现在代码里面。在默认情况下面，如果我们给当前的div加上 left right top bottom z-index这些属性的话。他也同样不会理你。因为该div没有脱离**文档流**。

小提示：*W3C规范中没有document flow这个概念，只有normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。*

文档流：元素按照其在 HTML 中的位置顺序决定排布的过程。自左到右，从上到下。依次排列。如果盘列的顺序改变了，那就是脱离了文档流。比如：floate absolute fixed。

一、static（静态定位）  
默认属性，请大家自行观看图片与源码。  
图示：  
![这里写图片描述][SouthEast]  
具体的展示效果，[戳我][Link 1]

二、releative(相对布局)  
给box1的div添加一个 one类。并添加以下属性。

.one{ position: relative; top: 50px; left: 50px; /*margin-top: 50px;*/ /*z-index: -1;*/ }

可得图示：![这里写图片描述][SouthEast 1]

可以看到left 和top的值起到作用了。相对于原来位置的右下方偏移了50px。

但是可以清楚的看到，绿色的div它并没有移动到最上面。这是因为红色的div在文档流当中仍然占据着一定的位置。

当你给红色div添加margin属性的话，底下的div也将会向下移动。

另外，这时候你修改z-index的值为-1的话。红色的div将会移动到绿色div的下面。

**如果你想实验padding的话，请把box-sizing:border-box；给注释了。或者把padding的值设置成100px以上，就会看见效果**  
至于原因是因为盒模型，我个人比较偏好IE盒模型。有时间的话，我也会在后面的博客里面讲到。

[大家可以点开我][Link 2]，审查元素试试！这就是相对布局。(至于那个辅助的观察线大家不用关注，接下来就是要讲到它)。

三、absolute(绝对布局)  
给box1的div添加一个 one类。并添加以下属性。

.one{ position: absolute; top: 50px; left: 50px; /*margin-top: 50px;*/ }

![这里写图片描述][SouthEast 2]

可以看到left 和top的值起到作用了。红色的div相对于原来位置的右下方偏移了50px。

更值得注意的是绿色的div已经跑到了文档流的最上面。由此观之，红色的div已经脱离了文档流。

此时你再给红色的div增加margin值，绿色的div是不会有任何反应的。padding的话亦是如此。它就好比定在那里了。不再受文档流的影响。

还有一点值得注意的就是，absolute好比是二哥，他有个大哥是relative。如果子级的div是absolute定位，父级div是relative定位。这样的话，子级的div就会相对父级定位，如果父级没有relative属性的话，absolute就是相对于body标签定位。

.wrapper{
                position: relative;
                margin:100px auto;
                width: 400px;
                height: 400px;
                border:1px solid red;
            }
            .wrapper .inner{
                position: absolute;
                left: 0;
                top: 0;
                width: 200px;
                height: 200px;
                background-color: blue;
            }
    ----------------我是不完美的分割线--------------------------------
    <div class="wrapper">
        <div class="inner"></div>
    </div>

大家[审查元素][Link 3]。取消wrapper的position:relative属性，观看蓝色div的位置变化。

四、fixed（固定布局）  
给box1的div添加一个 one类。并添加以下属性。

.one{ position: fixed; right: 0; top: 0; /*margin-top: 100px;*/

![这里写图片描述][SouthEast 3]

红色的div相对于浏览器位置的最右边。同样脱离了文档流，它与absolute最大的区别是 relative将无法对它进行约束。它的布局是跟随浏览器的窗口而来的。它也会有margin属性。大家可以添加上margin。[预览一下！][Link 4]

最后说一点：除了static以外。其他的都可以利用z-index进行层级的排序。

关于left top right bottom值的设置有一个小坑，有机会再跟大家说道说道！ 0点了 睡觉！

[SouthEast]: /images/20220708/56363476dac642a1b6edc714e77b1deb.png
[Link 1]: http://szy1000.oschina.io/position/static.html
[SouthEast 1]: /images/20220708/b6c7a9c2bc2c46cbbd026c16402111df.png
[Link 2]: http://szy1000.oschina.io/position/relative.html
[SouthEast 2]: /images/20220708/7fe0ef4f34864e1abd8c8783845d3e14.png
[Link 3]: http://szy1000.oschina.io/position/absolute.html
[SouthEast 3]: /images/20220708/b28ef1078a46416aa73fa1bffc36489b.png
[Link 4]: http://szy1000.oschina.io/position/fixed.html