当前阅读教程:CSS入门到精通 > sticky 定位 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: absolute 定位 | 下一篇: 重叠的元素 |
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位。 position: sticky; 基于用户的滚动位置来定位。 粘性定位的元素是依赖于用户的滚动,在 position:relative 与 position:fixed 定位之间切换。 它的行为就像 position:relative; 而当页面滚动超出目标区域时,它的表现就像 position:fixed;,它会固定在目标位置。 元素定位表现为在跨越特定阈值前为相对定位,之后为固定定位。 这个特定阈值指的是 top, right, bottom 或 left 之一,换言之,指定 top, right, bottom 或 left 四个阈值其中之一,才可使粘性定位生效。否则其行为与相对定位相同。 注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix (查看以下实例)。 实例代码<!doctype html> <html> <head> <meta charset="utf-8"> <title>CSS Position(定位)-sticky 定位</title> <!--定义内部样式--> <style> .sticky { position: -webkit-sticky; position: sticky;/*粘贴定位*/ top: 0; /*顶部0px*/ padding: 5px; /*内边距5px*/ background-color: #cae8ca;/*背景颜色*/ border: 2px solid #4CAF50;/*边框*/ } </style> </head> <body> <p>尝试滚动页面。</p> <p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p> <div>我是粘性定位!</div> <div style="padding-bottom:2000px"> <p>第01行文本</p> <p>第02行文本</p> <p>第03行文本</p> <p>第04行文本</p> <p>第05行文本</p> <p>第06行文本</p> <p>第07行文本</p> <p>第08行文本</p> <p>第09行文本</p> </div> </body> </html> 效果图 |
|
上一篇: absolute 定位 | 下一篇: 重叠的元素 |