position: sticky；粘性定位

亦凉 2022-12-02 00:50 140阅读 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 条评论，140人围观）

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

相关阅读

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

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

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

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

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

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

相关 position:sticky

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

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

相关 position: sticky；粘性定位

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

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

相关 position中的sticky

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

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

相关 css定位 position：sticky

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

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

相关 css3之position: sticky;

以前以前的以前我们都知道css中的position都有以下的属性： static(没有定位，是默认值）元素是出于正常的文档流中，会忽略left,top,righ

系统管理员/ 2022年05月21日 00:57/ 0 赞/ 166 阅读

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

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

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

相关 position:sticky

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

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

相关 CSS粘性定位

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

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