详解CSS中position特性详细介绍(新增sticky)

2021-01-20 18:20 jianzhan

近期有点忘了position几个赋值的內容,在这里简易总结1下。

position的含意是特定位种类,赋值种类能够有:static、relative、absolute、fixed、inherit和sticky,这里sticky是CSS3新公布的1个特性。

1、position: static

static(沒有精准定位)是position的默认设置值,元素处在一切正常的文本文档流中,会忽视left、top、right、bottom和z-index特性。

2、position: relative

relative(相对性精准定位)是指给元素设定相对本来部位的精准定位,元素其实不摆脱文本文档流,因而元素本来的部位会被保存,别的的元素部位不容易遭受危害。

3、position: absolute

absolute(肯定精准定位)是指给元素设定肯定的精准定位,相对性精准定位的目标能够分成两种状况:

1) 设定了absolute的元素假如存在有先祖元素设定了position特性为relative或absolute,则这时候元素的精准定位目标为此已设定position特性的先祖元素。

2) 假如并沒有设定了position特性的先祖元素,则此时相对body开展精准定位。

4、position: fixed

能够简易说fixed是独特版的absolute,fixed元素一直相对body精准定位的。

5、inherit

承继父元素的position特性,但必须留意的是IE8和往前的版本号都不适用inherit特性。

在讲sticky以前,先上编码:

html:

<h5>Relative</h5>
    <div class="div-container div-container1">
        <div class="div1">static1</div>
        <div class="div2">relative1</div>
        <div class="div3">static1</div>
    </div>
    <h5>Absolute</h5>
    <div class="div-container div-container2">
        <div class="div1">static2</div>
        <div class="div2">absolute2</div>
        <div class="div3">static2</div>
    </div>
    <h5>Relative contains Absolute</h5>
    <div class="div-container div-container3">
        <div class="div1">static3</div>
        <div class="div2">absolute3</div>
        <div class="div3">static3</div>
    </div>
    <h5>Absolute contains Absolute</h5>
    <div class="div-container div-container4">
        <div class="div1">static3</div>
        <div class="div2">absolute3</div>
        <div class="div3">static3</div>
    </div>

实际div的精准定位特性能够看块中的文本,显示信息的实际效果以下,能够看到与上面讲的1致:

6、sticky

position特性中最成心思的便是sticky了,设定了sticky的元素,在显示屏范畴(viewport)时该元素的部位其实不遭受精准定位危害(设定是top、left等特性失效),当该元素的部位即将移出偏位范畴时,精准定位又会变为fixed,依据设定的left、top等特性成固定不动部位的实际效果。

能够了解sticky特性有下列几个特性:

该元素其实不摆脱文本文档流,依然保存元素本来在文本文档流中的部位。当元素在器皿中被翻转超出特定的偏位值时,元素在器皿内固定不动在特定部位。亦即假如你设定了top: 50px,那末在sticky元素抵达间距相对性精准定位的元素顶部50px的部位时固定不动,已不向上挪动。元素固定不动的相对性偏位是相对离它近期的具备翻转框的先祖元素,假如先祖元素都不能以翻转,那末是相对viewport来测算元素的偏位量

较为蛋疼的是这个特性的适配性还并不是很好,现阶段还是1个实验性的特性,其实不是W3C强烈推荐的规范。它之因此会出現,也是由于监视scroll恶性事件来完成粘性合理布局使访问器进到慢翻转的方式,这与访问器要想根据硬件配置加快来提高翻转的体验是相悖的。

实际状况能够看下图,基础上能够说这个特性应用的访问器仅有FireFox和iOS的Safari:

简易的说,要让sticky特性起效的标准有下列两点:

1个是元素本身在文本文档流中的部位另外一个是该元素的父器皿的边沿

第1点上面早已讲过了,假如设定了top: 50px,那末元素在做到间距顶部50px时才会产生精准定位,不然其实不会产生精准定位。

第2点则必须考虑到父器皿的高宽比状况:sticky元素在抵达父器皿的底部时,则不容易再产生精准定位,假如父器皿高宽比并沒有比sticky元素高,那末sticky元素1刚开始就做到了底部,其实不会有精准定位的实际效果。

另外也有1点便是父元素的overflow特性,假如父元素的overflow特性其实不是默认设置的visible特性,那末sticky元素则相对该父元素精准定位。也便是假如要精准定位在顶部的话,此时这个实际效果就失效了。。。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。