通过CSS的sticky属性 重新回顾 position

前言:依稀记得刚学习前端找工作问过我一个面试题,css的position的属性有几种,我回答的是

absolute

生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

fixed

生成绝对定位的元素,相对于浏览器窗口进行定位。

元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative

生成相对定位的元素,相对于其正常位置进行定位。

因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

还有一种 没有回答出来,

static默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。

自此之后 我就坚定的认为 position 有四种属性。

这其实只是 css2 的position 的四种属性  也是最常用 且 兼容性最好的四种属性。

position 在css3中增加了 三种属性 

 

inherit此属性是继承祖父级定位,祖父标签为absolute,它就会为absolute,祖父标签为relative,它就会为 relative,祖父为fixed、static等亦如此。
sticky这个属性尴尬的一批,基本浏览能兼容的寥寥无几,ie,operaMINI 全军覆没,firefox 26以上,chrome 6.1以上…但是,我们也需要知道它。它是粘贴定位,用于一些特殊场景如:固定头部元素,向上滚动超出距离不消失。指定top、left、right、bottom 其中一个阙值生值,粘贴定位才会生效,否则,它的行为等同一个相对定位。它的解释是,监听页面的srcoll 事件,当元素超过视图区块顶部、左边、右边、下边距离后,添加 fixed,反之,则去掉。注意:1.优先级:top>left>right>bottom。 2. 祖父元素必须设置 overflow: visible。
unset是inital 和inherit的结合,设置在 top、left、right、bottom 上,意思是当属性值为可继承元素,那它等同于 inherit,非可继承元素,则等同于 inital。

 

1.需求

很常规的一个需求,移动端的页面 分多个模块,每个模块有一个title ,在页面向上滚动到对应模块时,title固定在头部。 如图

之前实现方式是 监听页面滚动,当页面滚动到指定区域时把对应的title设置成fixed。非常的麻烦

2.实现

<body>
    <style> 
    .title{
        border-left: 5px solid blue;
        padding: 3px 15px;
        font-weight: 900;
        position: sticky;
        top: 0;
        background: #fff;
    }
    .content{
        border: 1px solid red;
        height: 1000px;
    }
    </style>
    <div>
        <div class="title">这是标题1111</div> 
        <div class="content" >
            这是模块1 
        </div>
        <div class="title">这是标题2</div> 
        <div class="content">
            这是模块2
        </div>
    </div>
</body>

一行样式就完成了  可以说是非常的银杏。

总结:复习下position用法。

 

 

 

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值