css之sticky定位

1.属性介绍：

sticky定位（粘性定位），指的是基于用户的滚动位置来定位，默认情况下它表现就和relative定位一样，但是当页面滚动区域大于你的目标区域（即sticky对应的元素区域）时，它的表现和fixed定位一样。
元素定位也同样需要根据所设定的top,left,right,bottom来呈现。

2.sticky定位的缺点：

存在兼容性问题
Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要添加-webkit前缀。

3.案例：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>sticky</title><style>.userList-title{padding: 10px;background-color: greenyellow;position: -webkit-sticky;position: sticky;top:0;}.user-list-item{padding: 10px;background: pink;}.user-list-item:nth-child(odd){background-color: coral;}.phone{margin-top: 10px;}</style>
</head>
<body><div class="userList-title">用户列表</div><div class="user-list-item"><div class="username">张三</div><div class="phone">18989898989</div></div>.....此处省略n个列表项<div class="user-list-item"><div class="username">张三</div><div class="phone">18989898989</div></div></body>
</html>

css之sticky定位相关推荐

CSS定位（position））之sticky 定位
sticky 英文字面意思是粘,粘贴,所以可以把它称之为粘性定位. position: sticky; 基于用户的滚动位置来定位. 粘性定位的元素是依赖于用户的滚动,在 position:relati ...
十分钟轻松搞懂CSS的五大定位方式！（建议收藏）
文章目录一.CSS之position定位方式 1.static 2.relative 3.absolute(脱离正常文档流) 4.fixed(脱离正常文档流) 5.sticky 二.z-index ...
今天来总结一下CSS中有哪些定位
今天来总结一下CSS中有哪些定位 1.固定定位:fixed 元素的位置相对于浏览器窗口是固定位置,即使窗口是滚动的它也不会移动.Fixed 定位使元素的位置与文档流无关,因此不占据空间.Fixed 定 ...
CSS中Position定位属性的使用
文章目录 CSS中定位属性的使用 position:absolute position:relative position:fixed position:sticky position:static ...
CSS基础学习——定位
目录 1. 定位 1.1 为什么需要定位 1.2 定位组成 1.2.1 定位模式 1.2.2 边偏移 1.3 静态定位 static(了解) 1.4 相对定位 relative(重要) 1.5 绝对定 ...
WEB前端网页设计 CSS Position（定位）
目录 static 定位 fixed 定位 relative 定位 absolute 定位 sticky 定位重叠的元素所有的CSS定位属性 position 属性指定了元素的定位类型. posi ...
css定位页面元素,页面元素定位-CSS元素基本定位
基本定位 """属性定位一 """ # #通过id # driver.find_element_by_css_selector(" ...
CSS 详细解读定位属性 position 以及参数
Css 详细解读定位属性 position 以及参数 position 定位属性,是CSS中非常重要的属性.除了文档流布局,就是定位布局了.本来我对这个问题没有放在心上,毕竟写了这么多年的css,对p ...
xpath元素和css选择器的定位
我们一般进行元素定位使用xpath和css选择器 1.xpath元素定位 1.什么是xpath? XPath 是一门在 XML 文档中查找信息的语言 XPath即为XML路径语言(XML Path L ...
html列表无序嵌套,HTML/CSS - 如何正确定位这些嵌套的无序列表？
我寻找一些帮助解决与定位包含在其中具有相对定位一个div以下无序列表元素有一个问题IM:HTML/CSS - 如何正确定位这些嵌套的无序列表? 的UL的HTML结构: Your name Your e ...

css之sticky定位

css之sticky定位相关推荐

最新文章

热门文章