Html之position粘性定位

zhezhongyun 2025-05-27 19:12 21 浏览

这几天刚开始写一个Vue项目，遇到了一个定位问题，觉得挺有意思的，这里分享给大家。

其实就是一个首页顶部固定的问题，一提到顶部固定，相信大家都第一反应是想到了

position:fixed;

下面来看一下这个页面

这个页面看起来挺正常的，其实是下面内容区添加了margin-top:60px样式，如果把margin-top去掉就会变成下图这样

发现上面的Welcome to Your Vue.js App字样被顶部导航栏遮盖，这里大家可能会说，覆盖后下面内容设置一个margin-top不就行了，其实前面我就设置过margin-top为60px，这个60px实际上是顶部导航栏的高度；

导航栏高度基本上都是固定的，有时候除了导航栏需要固定，也会碰到一下其他的高度不固定的元素需要固定，如果margin-top单纯设置一个固高当然不行；

有人会说这个高度可以根据需要固定元素的高度动态设置，其实这是一种办法，通过js动态获取顶部导航栏的高度，然后给下面内容区margin-top赋值；

今天我想说的是另一种方法，就是position定位属性sticky粘性定位，大家听到这个可能并不陌生，sticky是CSS3提供的一个新属性，相当于是相对定位relative和固定定位fixed的结合体

它主要用在对scroll事件的监听上，简单说在滑动过程中，某个元素的距离其父元素的距离达到 sticky 粘性定位要求时；position:sticky 这时的效果就相对于 fixed 定位，固定到适当的位置。

但是sticky也需要满足一些条件才能生效

使用条件：

1. 父元素不能设置 overflow:hidden; 或者 overflow:auto; 属性；

2. 必须制定 top、bottom 、left 、 right 4个值之一，否则只会处于相对定位；

3. 元素的高度不能低于sticky 元素的高度；

4. sticky 元素仅在其父元素内生效