CSS应用position:sticky 完成粘性合理布局的方式

日期:2021-03-01 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

简介

前面写了1篇文章内容解读了position常见的几个特性:《CSS基本篇-- position特性解读》

1般都了解下面几个常见的:

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

在https://developer.mozilla.org/zh-CN/docs/Web/CSS/position还说了下面这3个值:

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

估算绝大多数都沒有用过position:sticky吧。这个特性值还在实验环节。如何叙述它呢?

初窥 position:sticky

sticky 英文本面意思是粘,粘贴,因此暂且称之为粘性精准定位。下面就来掌握下这个处在试验性的赋值的实际作用及好用情景。

这是1个融合了 position:relative 和 position:fixed 两种精准定位作用于1体的独特精准定位,可用于1些独特情景。

甚么是融合两种精准定位作用于1体呢?

元素先依照一般文本文档流精准定位,随后相对该元素在流中的 flow root(BFC)和 containing block(近期的块级先祖元素)精准定位。

然后,元素精准定位主要表现为在超越特殊阀值前为相对性精准定位,以后为固定不动精准定位。

这个特殊阀值指的是 top, right, bottom 或 left 之1,换言之,特定 top, right, bottom 或 left 4个阀值在其中之1,才可以使粘性精准定位起效。不然其个人行为与相对性精准定位同样。

sticky:目标在常态时遵照基本流。它就好像relativefixed的合体,当在显示屏中时按基本流排版,当卷动到显示屏外时则主要表现如fixed。该特性的主要表现是实际中你见到的吸附实际效果。

常见情景:当元素间距网页页面视口(Viewport,也便是fixed精准定位的参考)顶部间距超过 0px 时,元素以 relative 精准定位主要表现,而当元素间距网页页面视口小于 0px 时,元素主要表现为 fixed 精准定位,也就会固定不动在顶部。

编码:

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

以下图主要表现方法:

间距网页页面顶部超过20px,主要表现为 position:relative;

间距网页页面顶部小于20px,主要表现为 position:fixed;

应用 position:sticky 完成头顶部导航栏栏固定不动

html编码:

<div class="con">
    <div class="samecon">
        <h2>题目1</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
    <div class="samecon">
        <h2>题目2</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
    <div class="samecon">
        <h2>题目3</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
    <div class="samecon">
        <h2>题目4</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
    <div class="samecon">
        <h2>题目5</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
    <div class="samecon">
        <h2>题目56</h2>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
        <p>这是1段文字</p>
    </div>
</div>

CSS编码:

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

同理,还可以完成侧面导航栏栏的超过固定不动。

起效标准

  • 须特定 top, right, bottom 或 left 4个阀值在其中之1,才可以使粘性精准定位起效。不然其个人行为与相对性精准定位同样。
    • 而且 top bottom 另外设定时,top 起效的优先选择级高,left right 另外设定时,left 的优先选择级高。
  • 设置为 position:sticky 元素的随意父连接点的 overflow 特性务必是 visible,不然 position:sticky 不容易起效。这里必须解释1下:
    • 假如 position:sticky 元素的随意父连接点精准定位设定为 overflow:hidden,则父器皿没法开展翻转,因此 position:sticky 元素也不容易有翻转随后固定不动的状况。
    • 假如 position:sticky 元素的随意父连接点精准定位设定为 position:relative | absolute | fixed,则元素相对性父元素开展精准定位,而不容易相对性 viewprot 精准定位。
  • 做到设置的阈值。这个还算好了解,也便是设置了 position:sticky 的元素主要表现为 relative 還是 fixed 是依据元素是不是做到设置了的阀值决策的。适配性

这个特性的适配性还并不是很好,现阶段还是1个实验性的特性,其实不是W3C强烈推荐的规范。

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

上一篇:详解纯css完成瀑布流(multi 返回下一篇:没有了