原文：https://www.zhangxinxu.com/wordpress/2018/12/css-position-sticky/
前些日子，我在小程序上使用了这个属性，经个人实践及思考，发现原文的如下片段有些问题，比如使用position:sticky的限制条件，当时没有及时总结，具体是什么我忘了，还需下次实践的时候补充。
原文地址：https://www.cnblogs.com/djjlovedjj/p/11326444.html
时间： 2024-10-01 11:45:24
粘性定位position:sticky
粘性定位position:sticky的相关文章
粘性布局 position:sticky
今天在网上浏览时偶然发现原来CSS中的position属性除了有以下几个取值之外: static(默认) relative absolute fixed inhert 还有一个之前没见到的取值: sticky 没错= =就是它! sticky顾名思义粘性的,它的作用如下: 盒位置根据正常流计算,然后相对于该元素在流中的 flow root(BFC)和 containing block(最近的块级祖先元素)定位.在所有情况下(即便被定位元素为 table 时),该元素定位均不对后续元素造成影响.当
position:sticky实现iOS6+下的粘性布局
position:sticky实现iOS6+下的粘性布局 使用 position: sticky 达到粘性元素区域悬浮效果
使用 position: sticky 达到粘性元素区域悬浮效果
在一些很长的表格中,常常会使用表头悬浮的设计以方便阅读,即在表格离开窗口之前,表头会一直 fixed 悬浮在表格的最顶上.还有许多诸如评论框等元素,也采用了这种被称为 Sticky Pin 或者 粘性元素 的设计. 这种效果一直以来需要通过 JavaScript 实现.不过就在去年,这项结合了 Relative (在屏幕中时) 和 Fixed (移出屏幕时) 的样式效果被提案添加到了 CSS3 中.下面是一个示例: .sticky { position: -webkit-sticky; posi
position:sticky
前言:position:sticky是css定位新增属性:可以说是相对定位relative和固定定位fixed的结合:它主要用在对scroll事件的监听上:简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top:100px):position:sticky这时的效果相当于fixed定位,固定到适当位置.使用:#sticky-nav {position: sticky;top: 100px;}设置position:sticky同时给一个(top,bottom
CSS粘性定位
position:sticky粘性定位 sticky是css定位中不太常用的一种定位,但是可以根据粘性定位的特性 在页面中达到你想要的效果. 像是某些网站,在主导航栏下面还会有副导航栏,要实现页面往下拉,副导航栏一直定位在页面顶部,除了可以用js监听onscroll事件来实现,还可以通过sticky定位轻松搞定. 这里拿炉石传说的官网举例,打开页面是这样 当下拉滚动条,内容部分的导航栏就会停留在页面顶部 简单写个demo <!DOCTYPE html> <html lang="
浮动和渐变色，定位position，元素的层叠顺序
浮动: float 是我们网页布局的一种 浮动 可以有 left 左浮动 right 右浮动 两种 浮动的特点: 脱离正常的文档流,原本的空间不占据,浮动的标签都具有块级标签的一些特点,可以手动设置宽高 如果有相邻的多个浮动的元素,那么后面浮动的元素会停靠在前面浮动元素的后面,如果剩余空间不够,则会另起一行显示 如果一个元素中所有的内容都浮动了,那么这个元素本身高度则没有了,如果想要让这个元素高度还在,需要自己手动设置高度 清除浮动: 不是说把浮动的元素清理掉,而是清除浮动元素对其他元素的影响
鼠标滚动,导航置顶.纯css3的position: sticky;
position: sticky; 这东西来自css3,并且瞬间就完成了置顶的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .a{ //定位头部置顶效果 top: 0; position: sticky; } .b{ //当纯的给个滚
css3 position:sticky
最近在写一个小程序,项目中遇到一个需求:页面滚动到tab切换菜单时,菜单fixed到页面顶部: 实现方法: 使用小程序的onPageScroll事件,滚动到指定位置添加fixed样式: bug1:获取指定位置错误,因为上面都是图片,在图片未加载出来时获取高度,高度值不对,解决办法就是在imgae上加bindload事件,在图片加载加载完成之后再获取高度: bug2:onPageScroll事件会有延迟,导致最终效果会出现卡顿,百度之后知道有一个position:sticky,是一个很有意思的属性
定位--position属性
一.定位--position属性 1.static:默认值 没有定位--以标准文档流方式显示 2.relative:相对定位--相对自身原来的位置进行偏移(top left right bottom) 3.absolute:绝对定位 4.fixed:固定定位 二.相对定位元素的规律 1.设置相对定位的盒子会相对它原来的位置,通过指定偏移到达新的位置 2.设置相对定位的盒子仍在标准文档流中,它对父级盒子和相邻盒子都没有影响 三.绝对定位-- absolute属性 1.偏移位置:left right