您的位置:新葡亰496net > 新葡亰官网 > 福寿齐天粘性布局

福寿齐天粘性布局

发布时间:2019-10-06 07:04编辑:新葡亰官网浏览(54)

    选择 position:sticky 达成粘性布局

    2017/02/16 · CSS · position, 布局

    正文小编: 伯乐在线 - chokcoco 。未经作者许可,防止转发!
    接待参预伯乐在线 专栏撰稿人。

    比如问,CSS 中 position 属性的取值有多少个?
    当先51%人的答问是,大概是底下那多少个呢?

    { position: static; position: relative; position: absolute; position: fixed; }

    1
    2
    3
    4
    5
    6
    {
        position: static;
        position: relative;
        position: absolute;
        position: fixed;
    }

    额,其实,大家还足以有那 3 个取值:

    { /* 全局值 */ position: inherit; position: initial; position: unset; }

    1
    2
    3
    4
    5
    6
    {
        /* 全局值 */
        position: inherit;
        position: initial;
        position: unset;
    }

    没了吗?有时开采实际上还恐怕有一个远在实验性的取值,position:sticky(戳笔者翻看MDN解释):

    { position: sticky; }

    1
    2
    3
    {
        position: sticky;
    }

    卧槽,什么来的?

    图片 1

    前端发展太快,新东西目接不暇,不过对于有意思的东西,仍然不禁一探毕竟。(只怪当初…)

    使用 position:sticky 完结粘性布局,positionsticky

    若是问,CSS 中 position 属性的取值有多少个?
    比相当多人的回答是,大概是上面那多少个呢?

    {
        position: static;
        position: relative;
        position: absolute;
        position: fixed;
    }
    

    额,其实,大家还是可以有那 3 个取值:

    {
        /* 全局值 */
        position: inherit;
        position: initial;
        position: unset;
    }
    

    没了吗?不时发掘其实还会有二个远在实验性的取值,position:sticky(戳作者查看MDN解释):

    {
        position: sticky;
    }
    

    卧槽,什么来的?

    图片 2

    前端发展太快,新东西目接不暇,可是对于遗闻物,依然不禁一探毕竟。(只怪当初...)

    CSS基础篇--使用position:sticky 达成粘性布局,基础篇sticky

    初窥 position:sticky

    sticky 爱沙尼亚语字面意思是粘,粘贴,所以姑且称之为粘性定位。上边就来理解下这么些地处实验性的取值的实效及实用场景。

    这是贰个结缘了 position:relative 和 position:fixed 两种永世效率于一体的优良定位,适用于有些优良现象。

    怎么是构成二种永久作用于一体呢?

    要素先遵照通常文档流定位,然后相对于该因素在流中的 flow root(BFC)和 containing block(近些日子的块级祖先成分)定位。

    而后,成分定位表现为在超越特定阈值前为相对固化,之后为一定定位。

    本条一定阈值指的是 top, right, bottom 或 left 之一,换言之,钦赐 top, right, bottom 或 left 多少个阈值个中之一,才可使粘性定位生效。不然其行事与相对稳定一样。

     

    简介

    日前写了一篇小说疏解了position常用的多少个属性:《CSS 属性之 position批注》
    貌似都通晓上面多少个常用的:

    {
    position: static;
    position: relative;
    position: absolute;
    position: fixed;
    }
    

    /* 全局值 */
    position: inherit;
    position: initial;
    position: unset;
    

     

    评估价值超越54%都不曾用过position:sticky呢。那一个属性值还在调查阶段。怎么样描述它吧?

    sticky:对象在常态时遵守常规流。它就好像relativefixed的合体,当在显示屏中时按常规流排版,当卷动到显示器外时则表现如fixed。该属性的变现是切实中您看见的吸附效果。

     常用场景:当成分离开页面视口(Viewport,也正是fixed定位的参照)最上部相差超过0px 时,成分以 relative 定位表现,而当元素距离页面视口小于 0px 时,成分表现为 fixed 定位,也就可以一定在最上端。

    代码:

    {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    

    日常来说图表现方法:

    不乐观的宽容性

    在描述具体示例以前,如故很有必不可缺理解一下 position:sticky 的宽容性,嗯,不乐观的兼容性。

    看看 CANIUSE 下的截图:

    图片 3

    SHIT,这么好的属性帮忙性居然如此辛劳。

    图片 4

    IOS 家族(SAFARubiconI && IOS SAFAWranglerI)和 Firefox 很早开首就协理 position:sticky 了。而 Chrome53~55 则须要启用实验性互连网平台作用才行。当中 webkit 内核的要增加上私有前缀 -webkit-

    初窥 position:sticky

    sticky 希伯来语字面意思是粘,粘贴,所以姑且称之为粘性定位。下边就来打探下那几个地处实验性的取值的现实性职能及实用场景。

    那是三个重组了 position:relative 和 position:fixed 两种永久效能于一体的特别规定位,适用于部分不相同平常现象。

    什么样是整合三种永远成效于一体呢?

    要素先根据经常文书档案流定位,然后相对于该因素在流中的 flow root(BFC)和 containing block(如今的块级祖先成分)定位。

    而后,成分定位表现为在超越特定阈值前为相对稳固,之后为一定定位。

    其一一定阈值指的是 top, right, bottom 或 left 之一,换言之,内定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。不然其表现与相对固化一样。

    相差页面顶端大于20px,表现为 position:relative;

    图片 5

    Chrome53~55 开启实验性网络平台成效

    地方栏输入 chrome://flags/ ,找到 enable-experimental-web-platform-features ,选拔启用:

    图片 6

    据此下边包车型客车 CodePen 示例,要求上述多少个浏览器下观看。

     

    离开页面顶端小于20px,表现为 position:fixed;

    图片 7

    position:sticky 示例

    哦,上面包车型大巴文字描述揣摸依旧很难明白,看看上面那张 GIF 图,想想要贯彻的话,使用 JS CSS 的主意该如何是好:

    图片 8

    依据常规做法,差不离是监听页面 scroll 事件,判定每一区块距离视口最上部距离,超越了则设定该区块 position:fixed,反之去掉。

    而使用 position:sticky ,则能够充裕便于的落实(请在 SAFA本田CR-VI 只怕CHROME53 下观望):

    See the Pen positionSticky by Chokcoco (@Chokcoco) on CodePen.

    嗯,看看上边的 CSS 代码,只要求给每一种内容区块加上

    { position: -webkit-sticky; position: sticky; top: 0; }

    1
    2
    3
    4
    5
    {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }

    就足以轻松实现了。

    轻巧易行描述下生效进度,因为设定的阈值是 top:0 ,那么些值表示当成分距离页面视口(Viewport,也正是fixed定位的参阅)顶端距离当先0px 时,成分以 relative 定位表现,而当成分距离页面视口小于 0px 时,成分表现为 fixed 定位,也就能固定在最上部。

    不清楚能够再看看上面这两张暗示图(top:20px 的图景,取自开源项目fixed-sticky):

    不开展的包容性

    在陈述具体示例在此以前,依然很有必不可缺通晓一下 position:sticky 的包容性,嗯,不开展的宽容性。

    看看 CANIUSE 下的截图:

    图片 9

    SHIT,这么好的质量帮忙性居然如此艰苦。

    图片 10

    IOS 家族(SAFARubiconI && IOS SAFALANDI)和 Firefox 很早开头就支持 position:sticky 了。而 Chrome53~55 则须要启用实验性网络平台功效才行。当中 webkit 内核的要增多上私有前缀 -webkit-

    运用 position:sticky 完成底部导航栏固定

    html代码:

    <div class="con">
        <div class="samecon">
            <h2>标题一</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <div class="samecon">
            <h2>标题二</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <div class="samecon">
            <h2>标题三</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <div class="samecon">
            <h2>标题四</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <div class="samecon">
            <h2>标题五</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
        <div class="samecon">
            <h2>标题五六</h2>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
            <p>这是一段文本</p>
        </div>
    </div>
    

    CSS代码:

    .samecon h2{
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        background:#ccc;
        padding:10px 0;
    }
    

    同理,也足以完成侧面导航栏的不仅仅一定。

    距离页面最上端大于20px,表现为 position:relative;

    图片 11

     

    生效规则

    • 须钦定 top, right, bottom 或 left 两个阈值其中之一,才可使粘性定位生效。不然其作为与相对固定一样。

      • 并且 top 和 bottom 同期安装时,top 生效的预先级高,left 和 right 同有的时候间安装时,left 的优先级高。
    • 设定为 position:sticky 成分的轻松父节点的 overflow 属性必需是 visible,不然 position:sticky 不会收效。这里须要解释一下:

      • 如果 position:sticky 成分的随机父节点定位装置为 overflow:hidden,则父容器无法开展滚动,所以 position:sticky 成分也不会有滚动然后固定的图景。
      • 如果 position:sticky 成分的即兴父节点定位装置为 position:relative | absolute | fixed,则成分相对父成分进行稳固,而不会相对viewprot 定位。
    • 达到设定的阀值。那几个还算好明白,也正是设定了 position:sticky 的成分表现为 relative 还是 fixed 是依附成分是或不是达到设定了的阈值决定的。

    相距页面顶端小于20px,展现为 position:fixed;

    图片 12

    Chrome53~55 开启实验性互联网平台功能

    地点栏输入 chrome://flags/ ,找到 enable-experimental-web-platform-features ,采用启用:

    图片 13

    于是上面包车型大巴 CodePen 示例,供给上述多少个浏览器下看见。

     

    兼容性

    图片 14

    这个属性的兼容性还不是很好,目前仍是一个试验性的属性,并不是W3C推荐的标准。
    

     

    达成粘性布局,基础篇sticky 简单介绍后边写了一篇小说疏解了position常用的多少个属性:《CSS 属性之 position讲明》 一...

    运用 position:sticky 落成底部导航栏固定

    运用 position:sticky 完成导航栏固定,也是最广泛的用法:

    图片 15

    (请在 SAFARI 或者 CHROME53 下观看):

    See the Pen stickyNav by Chokcoco (@Chokcoco) on CodePen.

    同理,也得以兑现左侧导航栏的超过一定。

    position:sticky 示例

    哦,上面的文字描述测度依旧很难知晓,看看上边这张 GIF 图,想想要完毕的话,使用 JS CSS 的主意该怎么办:

    图片 16

    遵纪守法常规做法,大约是监听页面 scroll 事件,剖断每一区块距离视口最上部距离,超越了则设定该区块 position:fixed,反之去掉。

    而使用 position:sticky ,则足以极其低价的落到实处(请在 SAFAHighlanderI 也许CHROME53 下观望):

    嗯,看看上边的 CSS 代码,只须求给各类内容区块加上

    {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
    }
    

    就能够轻易完毕了。

    简单描述下生效进程,因为设定的阈值是 top:0 ,那个值表示当元素距离页面视口(Viewport,也正是fixed定位的参阅)最上端距离超过0px 时,成分以 relative 定位表现,而当成分距离页面视口小于 0px 时,成分表现为 fixed 定位,也就能固定在最上端。

    不知情能够再看看下边这两张暗中提示图(top:20px 的状态,取自开源项目fixed-sticky):

    生效准绳

    position:sticky 的生效是有早晚的界定的,总括如下:

    1. 须钦定 top, right, bottom 或 left 七个阈值在那之中之一,才可使粘性定位生效。不然其表现与相对固定一样。
      • 并且 top 和 bottom 同期安装时,top 生效的事先级高,left 和 right 同临时候安装时,left 的先行级高。
    2. 设定为 position:sticky 成分的自便父节点的 overflow 属性必得是 visible,不然 position:sticky 不会收效。这里需求解释一下:
      • 如果 position:sticky 成分的人身自由父节点定位装置为 overflow:hidden福寿齐天粘性布局。,则父容器无法开展滚动,所以 position:sticky 成分也不会有滚动然后固定的场所。
      • 如果 position:sticky 成分的轻易父节点定位装置为 position:relative | absolute | fixed,则成分相对父成分进行牢固,而不会相对viewprot 定位。
    3. 高达设定的阀值。这几个还算好驾驭,也等于设定了 position:sticky 的成分表现为 relative 还是 fixed 是依赖成分是不是达到设定了的阈值决定的。

    距离页面最上端大于20px,表现为 position:relative;

    图片 17

    起来选择?

    下边从包容性也看到了,景况不容乐观,不过用于某个布局还是能省非常多力的,如若实在愿意用上这一个性格,能够应用局地开源库来完成包容。

    推荐 fixed-sticky 。

    比比都已 CSS 小说汇总在自家的 Github 。

    到此本文截止,要是还有怎样疑点照旧提议,能够多多交换,原创作品,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    打赏帮助自身写出越多好小说,多谢!

    打赏作者

    离开页面最上端小于20px,表现为 position:fixed;

    图片 18

    打赏援助作者写出更加多好小说,感谢!

    任选一种支付办法

    图片 19 图片 20

    2 赞 4 收藏 评论

     

    有关小编:chokcoco

    图片 21

    经不住命宫似水,逃但是此间少年。 个人主页 · 笔者的小说 · 63 ·    

    图片 22

    运用 position:sticky 实现底部导航栏固定

    运用 position:sticky 实现导航栏固定,也是最普及的用法:

    图片 23

    (请在 SAFARI 或者 CHROME53 下观看):

    同理,也得以完毕左边导航栏的超出一定。

     

    生效法规

    position:sticky 的见效是有自然的限量的,计算如下:

     

    起来使用?

    地点从包容性也看出了,情形不容乐观,可是用于有个别布局还能够省非常多力的,要是真的愿意用上那些性格,能够运用部分开源库来达成宽容。

    推荐 fixed-sticky 。

     

    排山倒海 CSS 文章汇总在自己的 Github 。

    到此本文结束,假使还会有啥样疑难依旧提议,能够多多沟通,原创小说,文笔有限,才疏学浅,文中若有不正之处,万望告知。

    position:sticky 达成粘性布局,positionsticky 假使问,CSS 中 position 属性的取值有多少个? 超越51%人的应对是,大致是下边那多少个呢? { posi...

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:福寿齐天粘性布局

    关键词: