最熟悉的陌生属性——position

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

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（静态定位）
默认属性，请大家自行观看图片与源码。
图示：
最熟悉的陌生属性——position
具体的展示效果，戳我

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

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

可得图示：最熟悉的陌生属性——position

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

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

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

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

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

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

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

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

最熟悉的陌生属性——position

可以看到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>

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

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

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

最熟悉的陌生属性——position

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

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

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

秒客网

最熟悉的陌生属性——position

相关文章