position: sticky；粘性定位

亦凉 2022-12-02 00:50 224阅读 0赞

> 想整个滚动条插件，但是里面的元素如果用absolute定位的话，会跟随滚动条滚动，fixed也不好用，偶然查到position: sticky；，确实可以解决这个问题（但兼容很差），先谷歌用着吧

position: sticky; 基于用户的滚动位置来定位。

粘性定位的元素是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix；

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<title>Title</title>
    		<style>
    			*{ 
    				margin: 0;
    				padding: 0;
    				box-sizing: border-box;
    			}
    			.box { 
    				height: 300px;
    				width: 100%;
    				margin: 0 auto;
    				background-color: red;
    				position: relative;
    				overflow: scroll;
    				margin-top: 20px;
    			}
    			.abso{ 
    				position: sticky;
    				top: 0;
    				left:0;
    				width: 110%;
    				height: 50px;
    				background-color: green;
    			}
    			.msg{ 
    				width: 110%;
    				height: 600px;
    				background: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div class="box">
    			<div class="abso">
    				123123
    			</div>
    			<div class="msg">
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    				<p>123123sdasd</p>
    			</div>
    		</div>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，224人围观）

还没有评论，来说两句吧...

相关阅读

相关彻底理解粘性定位 - position: sticky（IT枫斗者）

彻底理解粘性定位 - position: sticky 介绍粘性定位可以被认为是相对定位(position: relative)和固定定位(position

谁践踏了优雅/ 2024年03月22日 17:25/ 0 赞/ 49 阅读

相关好用不难的粘性布局 position:sticky

背景最近项目中遇到一个需求大体是在一个复杂表格中实现滚动的时候，第一行是置顶固定不动，其余行正常滚动，有点类似于表格左右滚动的时候设置了固定列的效果一样。但是在现在的u

野性酷女/ 2023年05月30日 04:58/ 0 赞/ 35 阅读

相关 CSS的定位方式有哪几种？详解sticky粘性定位！！！

css有五种定位方式，分别是：`static`， `relative`，`absolute`，`fixed` 和 `sticky`。 1. static 静态定位 HT

╰半橙微兮°/ 2023年01月17日 06:22/ 0 赞/ 180 阅读

相关 position:sticky

1、position:sticky简介设置了`position:sticky`的元素并不会脱离文档流。当元素在区域内，元素不受定位的影响（`top`、`lef

梦里梦外;/ 2022年12月08日 04:55/ 0 赞/ 160 阅读

相关 position: sticky；粘性定位

> 想整个滚动条插件，但是里面的元素如果用absolute定位的话，会跟随滚动条滚动，fixed也不好用，偶然查到position: sticky；，确实可以解决这个问题（但兼

亦凉/ 2022年12月02日 00:50/ 0 赞/ 225 阅读

相关 position中的sticky

设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fix

蔚落/ 2022年06月09日 14:48/ 0 赞/ 176 阅读

相关 css定位 position：sticky

定位有各种各样的类型，我们来看看这个sticky ( 尽管兼容性有些问题，但是却很好用 )；先来演示一下： <!doctype html> < html> < he

￡神魔★判官ぃ/ 2022年05月28日 04:37/ 0 赞/ 277 阅读

相关 CSS3 粘性定位实现吸顶 position: sticky

粘性定位是相对定位（relative）和固定定位（fixed）的混合。元素在跨越特定阈值前为相对定位，之后为固定定位。著作权归作者所有。它主要用在对scroll事件的

分手后的思念是犯贱/ 2022年04月01日 06:41/ 0 赞/ 596 阅读

相关 position:sticky

position属性设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时

雨点打透心脏的1/2处/ 2022年03月09日 07:35/ 0 赞/ 193 阅读

相关 CSS粘性定位

　　position:sticky粘性定位　　sticky是css定位中不太常用的一种定位，但是可以根据粘性定位的特性在页面中达到你想要的效果。　　像是某些网站，在

野性酷女/ 2021年12月03日 05:57/ 0 赞/ 397 阅读