你真的认识css里面的position么？！

时间 2019-11-08

标签认识 css 里面 position 栏目 CSS 繁體版

原文原文链接

开门见山，第一篇文章咱们来讲说css里面最经常使用的position属性
原因一次笔者面试，被问及了下面的代码，面试官让我画出这5个div的位置，自觉得对css成竹在胸的我看到正确答案的那一刻也是吃惊很多，因而回家翻阅文档，想看看relative究竟是相对什么定位，absolute究竟是怎么绝对定位。
看代码：css

<style>
    div {
        border: 1px solid #000;
    }
    .div1{
        width:60px;
        height:120px;
        position: absolute;
        top: 0;
        left: 0;
    }
    .div2 {
        width:120px;
        height:60px;
        position: relative;
        top:30px;
        left:30px;
    }
    .div3 {
        width:120px;
        height:60px;
        position: relative;
        top:15px;
        left:15px;
    }
    .div4 {
        width:120px;
        height:60px;
        position: absolute;
        right:0;
    }
    .div5 {
        width:60px;
        height:120px;
    }
</style>
<body>
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>
    <div class="div4">4</div>
    <div class="div5">5</div>
</body>

你们有个大概的印象，先不急着说答案，咱们从MDN上面的关于absolute和relative的概念提及（本文不对fixed作重点）html

relative:
This keyword lays out all elements as though the element were not positioned, and then adjust the element's position, without changing layout (and thus leaving a gap for the element where it would have been had it not been positioned). The effect of position:relative on table-*-group, table-row, table-column, table-cell, and table-caption elements is undefined.面试

absolute:
Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor if any, or otherwise relative to the initial containing block. Absolutely positioned boxes can have margins, and they do not collapse with any other margins.app

笔者粗略翻译一下：布局

reletive：
这个关键字展现元素就好像没被定位过同样，在不改变布局的前提下调整元素位置（所以会在该元素原本的位置留下一个空白）。position:relative对table-*-group,table-row, table-column, table-cell, table-caption无效。spa
absolute：
不给元素保留空间，相反，元素定位的位置是相对它最近的非static定位的祖先元素来肯定的。绝对定位的元素能够设置外边距，而且不会与其余边距合并。翻译

（之因此没用MDN中文版翻译是以为翻译的很差，虽然我翻译的也不咋地。。。）code

换成个人理解：htm

relative定位以后不改变文档流位置，保留其定位以前的文档流位置blog
absolute改变文档流，而且是相对于第一个被定位过的（非static）祖先元素定位，若是没有就是根元素

相信你们对于absolute没有什么异议，可是relative我相信很大一部分人没有注意过“保留其定位以前的文档流位置”这句话，这才是重点，看代码来讲明

<style>
    body,div {
        border: 1px solid #000;
    }
    .wrap {
        margin: 100px 0 0 100px;
        width: 400px;
        height: 400px;
    }
    .div1 {
        width:120px;
        height:60px;
        position: relative;
        top:30px;
        left:30px;
    }
    .div2{
        width:60px;
        height:120px;
        position: absolute;
        top: 30px;
        left: 30px;
    }        
    .div3 {
        width:120px;
        height:60px;
        position: relative;
        top:15px;
        left:15px;
    }
</style>
<body>
我是body
<div class="wrap">
    我是wrapper
    <div class="div1">1111</div>
    <div class="div2">2222</div>
    <div class="div3">3333</div>
</div>
</body>

结果见下图：

好的，咱们如今来分析一下：

div2不用说，因为父元素wrap没有进行定位，所以他基于html来定位(注意不是body);
重点说应用了relative的div1和div3，能够明显从图中看到div1距离wrap的left和top根本不同啊，什么鬼啊，但是咱们明明设置的都是30px啊，请你们想一下文档中说的那句话“保留其定位以前的文档流位置”，那是否是能够理解成他是基于元素给定relative以前的文档流位置定位的呢，下面咱们就来检验下看看是否是成立

我用ps作了一张图，红点是div1和div3原先的文档流位置，绿点是他们应用了relative以后的位置，这下是否是就对了，证实了咱们以前的观点 -- relative是相对于本身的文档流位置进行定位

我在这里补充一句：可能有的同窗会问“当div1进行定位以后div3的文档流位置会不会发生变化啊”，答案是不会，由于文档里面说进行relative定位以后“without changing layout”，因此div1和div3的文档流位置都不变。

看懂了上面内容的同窗如今能够试着作一下我开篇的那个题目，看看到底有没有理解position这个抬头不见低头见的css属性

好了，第一篇文章就这么华丽的结束了，内容比较简单，欢迎各路大牛给出指导意见。能看个人文章BB到这里的同窗都辛苦了，毕竟知道本身文章一贯不通顺，不过我会慢慢提升的，哈哈哈。

附上答案：