如果在面试题中被问到,CSS 中 position 属性的取值有哪几个,你会怎么回答?
大部分人的回答大概是static
、relative
、absolute
、fixed
,实际上还有一个 sticky
。
今天我们就来给大家介绍这个容易被忽视的position属性值 sticky
。
先来看看MDN上对于 sticky
的介绍:
粘性定位元素(stickily positioned element)是计算后位置属性为 sticky 的元素。
粘性定位可以被认为是相对定位和固定定位的混合。
什么是结合两种定位功能于一体呢?
元素在跨越特定阈值前为相对定位,之后为固定定位。
也就是元素先按照普通文档流定位,然后相对于该元素在流中的 flow root(BFC)
和 containing block
(最近的块级祖先元素)定位。
元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。
这个特定阈值指的是 top、right、bottom 或 left 之一,换言之,指定 top、right、bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。
上面的文字描述估计还是很难理解,看看下面这张 GIF 图,想想要实现的话,使用 JS + CSS
的方式该如何做:
按照常规做法,大概是监听页面 scroll
事件,判断每一区块距离视口顶部距离,超过了则设定该区块 position:fixed
,反之去掉。
而使用 position:sticky
,则可以非常方便的实现:
<div class="container">
<div class="sticky-box">内容1</div>
<div class="sticky-box">内容2</div>
<div class="sticky-box">内容3</div>
<div class="sticky-box">内容4</div>
</div>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
.sticky-box {
position: sticky;
height: 60px;
margin-bottom: 30px;
background: #ff7300;
top: 0px;
}
div {
font-size: 30px;
text-align: center;
color: #fff;
line-height: 60px;
}
看看上面的 CSS 代码,只是给每个内容区块加上
{
position: sticky;
top: 0;
}
就可以轻松实现了。
简单描述下生效过程,因为设定的阈值是 top:0
,这个值表示当元素距离页面视口(Viewport,也就是fixed定位的参照)顶部距离大于 0px 时,元素以 relative 定位表现,而当元素距离页面视口小于 0px 时,元素表现为 fixed 定位,也就会固定在顶部。
不理解可以再看看下面这两张示意图(top:20px 的情况):
距离页面顶部大于20px,表现为 position:relative;
距离页面顶部小于20px,表现为 position:fixed;
运用 position:sticky 实现导航栏固定,也是最常见的用法:
<div class="container">
<nav>我是导航栏</nav>
<div class="content">
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
<p>我是内容栏</p>
</div>
</div>
.container {
background: #eee;
width: 600px;
height: 1000px;
margin: 0 auto;
}
nav {
position: sticky;
top:0;
}
nav {
height: 50px;
background: #999;
color: #fff;
font-size: 30px;
line-height: 50px;
}
.content {
margin-top: 30px;
background: #ddd;
}
p {
line-height: 40px;
font-size: 20px;
}
同理,也可以实现侧边导航栏的超出固定。
position:sticky
的生效是有一定的限制的,总结如下:
top, right, bottom 或 left
四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。position:sticky
元素的任意父节点的 overflow
属性必须是 visible
,否则 position:sticky
不会生效。这里需要解释一下:position:sticky
元素的任意父节点定位设置为 overflow:hidden,则父容器无法进行滚动,所以 position:sticky
元素也不会有滚动然后固定的情况。position:sticky
元素的任意父节点定位设置为 position:relative | absolute | fixed
,则元素相对父元素进行定位,而不会相对 viewprot
定位。position:sticky
的元素表现为 relative 还是 fixed 是根据元素是否达到设定了的阈值决定的。从上面的兼容性可以看到,在主流的浏览器中已经可以正常使用。
《前端面试题宝典》
经过近一年的迭代,现已推出 小程序
和 电脑版刷题网站 (https://fe.ecool.fun/
),欢迎大家使用~
同时,我们还推出了面试辅导的增值服务,可以为大家提供 “简历指导” 和 “模拟面试” 服务,现在参与还有额外优惠,感兴趣的同学可以联系小助手(微信号:interview-fe)进行体验哦~