CSS布局学习（三） - position属性定义及解释(官网直译)

static

①元素的位置是在文档正常布局流中的位置。

②设置top right bottom left与z-index无效。

③在未指定position时，static是默认值

以下例子进行说明：

.default{

    width: 100px;

    height: 100px;

    background-color: salmon;

    top: 20px;

    left: 20px;

}

.static{

    width: 100px;

    height: 100px;

    background-color: yellowgreen;

    top: 20px;

    left: 20px;

}

<body>

<div class="default">default</div>

<div class="static">static-1</div>

<div class="static">static-2</div>

</body>

运行结果：

结果说明：

元素static-1 static-2的位置都是文档正常布局流中的位置，与①符合
元素static-1 static-2的位置都未发生偏移，与②符合
default元素与static-1 static-2的表现一致，与③符合

relative (相对定位)

① 元素先放置在未添加定位时的位置（即文档正常布局流中的位置），然后在不改变页面布局的情况下，依据元素的top right bottom left重新调整元素位置。

② 它的偏移量对其它元素定位均不会产生影响，也就是是说，元素在页面布局中所占的空间是不变的，这一点与postion值是static的情况是相同的

下面的例子说明以上两点

.static{

    width: 100px;

    height: 100px;

    background-color: salmon;

    top: 20px;

    left: 20px;

}

.relative{

    position: relative;

    width: 100px;

    height: 100px;

    background-color: yellowgreen;

    top: 20px;

    left: 20px;

}

<body>

<div class="static">static-1</div>

<div class="relative">relative-1</div>

<div class="static">static-2</div>

</body>

运行结果

结果说明：

根据文档常规流位置，relative-1首先被放置在static-1下面，然后根据top left属性向下向右各偏移20px，这与①中的定义相符合
static-2的位置不受relative-1偏移量的影响，显示在它不发生偏移的位置正下方，即图中红色圈圈的正下方，这与②中的定义相符合

PS：当z-index的值不为auto时，这个值会创建一个层叠上下文。position:relative对table-*-group, table-row, table-column, table-cell, and table-caption元素无效

absolute（绝对定位）

① 元素脱离文档常规布局流不受其影响，页面布局不为该元素预留空间。

以下例子进行说明

.relative {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

}

.static {

    width: 150px;

    height: 150px;

    background-color: lightskyblue;

}

.absolute {

    width: 100px;

    height: 100px;

    background-color: salmon;

    top: 50px;

    left: 50px;

    position: absolute;

}

<body>

<div class="relative">

    relative-ancestor

    <div class="static">

        static-parent

        <div class="absolute">absolute</div>

    </div>

</div>

</body>

结果说明：如果按照文档布局流，元素absolute应该再图中元素default-2的位置，但是其实际结果位于default-1，default-2之上，且default-2位置不受absolute的影响，与①中定义相符合

② 如果有非static的祖先元素，可以通过相对于祖先元素的偏移量来确定元素位置；如果没有，它会相对于初始包含块进行偏移，偏移量由 top right bottom left来指定

以下例子进行说明：

.static {

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

}

.relative {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

}

.absolute {

    width: 100px;

    height: 100px;

    background-color: salmon;

    top: 50px;

    left: 50px;

    position: absolute;

}

<body>

<div class="relative">

    relative-ancestor

    <div class="static">

        static-parent

        <div class="absolute">absolute</div>

    </div>

</div>

</body>

运行结果一：

修改html代码

<body>

    <div class="absolute">absolute</div>

</div>

</body>

运行结果二

结果说明：

运行结果一：absolute元素最近的父元素为static-parent，但是并没有相对于static-parent进行向下向右各50px的偏移，说明absolute元素的位置不受static父级元素影响。absolute元素实际是相对于relative-ancestor进行偏移的
运行结果二：在没有非static的父级元素时，absolute元素会相对于初始包含块进行偏移，此处的初始包含块为窗口视口还是浏览器窗口？

③ 当z-index的值不为auto时，这个值会创建一个层叠上下文。

④ 绝对定位元素的外边距与其他元素的外边距不会合并

例子如下：

.relative {

    position: relative;

    width: 100px;

    height: 100px;

    background-color: yellowgreen;

    margin-bottom: 20px;

    margin-top: 20px;

}

<body>

<div class="relative">relative-1</div>

<div class="relative">relative-2</div>

</body>

运行结果一

修改代码

.relative {

    position: relative;

    width: 100px;

    height: 100px;

    background-color: yellowgreen;

    margin-bottom: 20px;

    margin-top: 20px;

}

.absolute {

    width: 100px;

    height: 100px;

    background-color: salmon;

    top: 100px;

    left: 100px;

    position: absolute;

    margin-bottom: 20px;

    margin-top: 20px;

}

运行结果二

结果说明：

结果一中的relative-1的margin-bottom的bottom外边距与relative-2的top外边距合并，变为20px。
结果二中absolute元素向下偏移了120px=top+margin-top，向右偏移了100px=left，外边距是相对于初始包含块的，与同级的relative没有相互影响

大多数情况下，height和width都设定为auto的绝对定位元素，按其内容大小调整尺寸。但是被绝对定位的元素可以通过指定top，bottom，保留height（即auto）来填充可以用的垂直空间。同样也可以通过指定left，right并将width指定为auto来填充可用的水平空间

如果top与bottom同时被指定（具体值而不是auto），top生效
如果left与right同时被指定，direction为ltr的情况下，left生效（direction为rtl时，right生效）

fixed（固定定位）

① 元素脱离文档常规布局流不受其影响，页面布局不为该元素预留空间。（与absolute元素一样，此处不做说明）

② 元素是相对于浏览器屏幕视口（viewport）进行定位的，偏移量由top right bottom left决定，元素的位置在窗口滚动时不会变化，这意味着可以用其创建固定的UI项目，如持久导航菜单。

例子如下

.relative {

    position: relative;

    width: 1000px;

    height: 1000px;

    background-color: yellowgreen;

}

.fixed {

    position: fixed;

    width: 150px;

    height: 150px;

    background-color: lightskyblue;

    top: 20px;

    left: 20px;

}

<body>

<div class="relative">

    relative-parent

    <div class="fixed">fixed</div>

</div>

</body>

运行结果

③ 当固定定位元素的祖先元素的transform， perspective或者filter属性设置为none时，它就相对于这个祖先元素进行定位（改变了②中的规则）

例子如下：

.relative {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

    transform: rotate(7deg);

}

.fixed {

    position: fixed;

    width: 50px;

    height: 50px;

    background-color: lightskyblue;

    top: 20px;

    left: 20px;

}

<body>

<div class="relative">

    relative-parent

    <div class="fixed">fixed</div>

</div>

</body>

运行结果

结果说明：与③中的说明符合

④ 打印时，元素会出现在每页固定的位置（土豪可以自行打印测试）

sticky（粘性定位）

① 元素首先放置在文档正常布局流中指定的位置，然后相对于最近的块级祖先(containing block)进行偏移，偏移量由top right bottom left属性决定。

② 元素的位置偏移量不会对其他元素造成影响

③ 至少指定top right bottom left中的一个值，否则效果与relative相同

以下是例子：

.relative1 {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

}

.sticky {

    position: sticky;

    width: 100px;

    height: 100px;

    background-color: lightskyblue;

    /*left: 50px;*/

    /*top: 50px;*/

}

.relative2 {

    position: relative;

    width: 100px;

    height: 100px;

    background-color: salmon;

    top:50px;

    left: 50px;

}

<body>

<div class="relative1">

    relative1

    <div class="sticky">sticky</div>

    <div class="relative2">relative2</div>

</div>

</body>

运行结果一

修改css代码，注释取消。html保持不变

.relative1 {

    position: relative;

    width: 200px;

    height: 200px;

    background-color: yellowgreen;

}

.sticky {

    position: sticky;

    width: 100px;

    height: 100px;

    background-color: lightskyblue;

    left: 50px;

    top: 50px;

}

.relative2 {

    position: relative;

    width: 100px;

    height: 100px;

    background-color: salmon;

    top:50px;

    left: 50px;

}

运行结果二

结果说明

运行结果一，在未设置偏移量的时候，元素sticky的位置为正常文档布局流中的位置。与①前半部分相符合
运行结果二，设置偏移量后，元素相对于relative1进行向下向右各50px的偏移，与①后半部分相符合
而运行结果一与结果二中，即sticky元素设置与不设置偏移量都对relative2位置没有影响，与②后半部分符合

官网文档地址