position:sticky特性（坑）总结

最新推荐文章于 2023-02-22 14:00:05 发布
最新推荐文章于 2023-02-22 14:00:05 发布
阅读量1k 收藏 1
点赞数
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huang100qi/article/details/104263430
版权

1.sticky不会触发BFC，
2.z-index无效，
3.当父元素的height：100%时，页面滑动到一定高度之后sticky属性会失效。
4.父元素不能有overflow:hidden或者overflow:auto属性。
5.父元素高度不能低于sticky高度，必须指定top、bottom、left、right4个值之一


 

huang100qi
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端面试小总结
wust_cyl的博客
03-04 405
HTML部分： 1：请你说说Doctype的作用。 答：用于告知浏览器的解析器用什么文档标准解析这个文档。HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。<!Docutype html>告知浏览器以html5的文档标准解析这个文档。 2：请你说一下<head>标签中能够写那些标签。 答：...
css总结
love_dzq的博客
05-20 2158
对CSS2以及CSS3和移动端布局方式做了个总结
position:sticky用法介绍及浏览器兼容性
09-25
用户的屏幕越来越大，而页面太宽的话会不宜阅读，所以绝大部分网站的主体宽度和之前相比没有太大的变化，于是浏览器中就有越来越多的空白区域，所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见，比如，侧边栏的部分区域。position:sticky为此而生,接下来
关于sticky和z-index的几个小坑
weixin_52447755的博客
09-09 782
position：sticky 首先说说注意点 position:sticky; 设置top或left等定位 注意一般是给外层容器设置，当然也可以根据需求调整 神坑 某次我给设置了sticky的节点的兄弟节点设置了max-height，但是实际高度是大于最大高度的，这就会有划到一定高度后设置了sticky的节点不见了，所以要注意高度不能大于最大高度 z-index假失效 要注意设置z-index的节点背景色是不是透明的，不然真的要找很久bug，设置下背景色就好了
css粘性定位position：sticky问题采坑
热门推荐
小熊的博客
07-14 14万+
前言：position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。使用：#sticky-nav { position...
深入理解css中position属性及z-index属性
weixin_33835103的博客
11-29 619
深入理解css中position属性及z-index属性 　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。 　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。   第一部分：...
position定位 响应式_position: sticky 不起作用？原理分析+爬坑笔记
weixin_39615984的博客
11-30 1103
众所周知，position: sticky 是一个非常好用的玩意儿。之前几次用得都很爽，但是这次我在某个项目使用过程中遇到了一个问题，它意外地没有起到我预期的作用，经过查阅标准文档后我搞懂了这个问题，特此记录。假设有如下代码CSS部分#container { background-color: #eee; /* 祖先容器的 overflow 属性至关重要 */ /* ove...
ios (12.0.1) 中position: sticky属性，导致z-index属性失效
id_ip的博客
06-10 2481
在部分ios系统中(12.0.1) ，h5页面，在元素上设置position: sticky属性进行固定元素，会导致其z-index失效。 解决方法：可以将sticky值改为fixed
python中sticky_position: sticky 详解（防坑指南）
weixin_35976993的博客
03-02 2774
写这篇文章的原因是无论中文还是英文关于 sticky 的文章，只是说了 sticky 这个性感的 css 新特性可以拿来用，简单写一个 demo 完事，并没有详细的解析它。我希望这篇文章能帮助大家在使用 sticky 的时候更顺手。属性效果sticky 的本意是粘糊糊的，但在 css 中的表现更像是吸附。常见的吸顶、吸底(移动端网站的头部返回栏，底部切换栏之类)的效果用这个属性非常适合。例如下图中...
2021前端面试题总结（主React）
gd81325的博客
01-05 8129
都是自己常问的面试题吧… 基础问完后，测试水平（刁难）用，大家凑活看，因为是2021总结的所以是2021年前端面试题，不断更新（没有排序，想起什么写什么） 一、粘性定位通常在什么场景下使用，使用方法，使用条件？ 场景：场景自定义，我通常用在header，很好用 使用方法：设置 position:sticky 同时给一个 (top,bottom,right,left) 之一即可 使用条件： 父元素不能overflow:hidden或者overflow:auto属性。 必须指定top、bottom、left
【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（一）
柳柳66的博客
11-22 588
【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（一） 前言：学习Vue.js高仿饿了么课程过程中，总结了这个Web App项目从准备到开发完毕自己觉得很重要的知识点。这一篇主要介绍：项目准备、页面骨架开发、header组件开发。 项目github地址：https://github.com/66Web/ljq_e...
web前端常见面试题45道总结
anzuaifangcheng的博客
11-14 861
1.XML和JSON的区别？ (1).数据体积方面。 JSON相对于XML来讲，数据的体积小，传递的速度更快些。 (2).数据交互方面。 JSON与JavaScript的交互更加方便，更容易解析处理，更好的数据交互。 (3).数据描述方面。 JSON对数据的描述性比XML较差。 (4).传输速度方面。 JSON的速度要远远快于XML。 2.position的值， relative和absolute...
position:sticky
chelflan's blog
12-28 859
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8244 本文可全文转载，个人网站无需授权，只要保留原作者、出处以及文中链接即可，任何网站均可摘要聚合，商用请联系授权。 一、Chrome杀了个回马枪 position:sticky早有耳闻也有所了解，后来，Chrome放弃了对其支持，我也就不关心这个声明了，今天偶然发现，卧槽，C...
position:sticky实现吸顶效果以及兼容性
qazxbjp2010的博客
03-26 5954
在开发时遇到一个吸顶效果的需求，先看一下最终实现的效果： 收到这个需求的时候，其实也知道position:stricky这个属性，现在重新介绍一下： 这是一个结合了 position:relative 和 position:fixed 两种定位功能于一体的特殊定位，适用于一些特殊场景。 如果 position:sticky 元素的任意父节点定位设置为 overflow:hidden，则父...
2020-12-03问题以及知识盲点
qq_43506529的博客
12-03 142
position新增属性 position:sticky是css定位新增属性；可以说是相对定位relative和固定定位fixed的结合；它主要用在对scroll事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置。 注意点： 设置position:sticky同时给一个(top,bottom,right,left)之一即可 使用条件： 1、父元素不能overf
position属性及z-index属性
yanner_的博客
07-22 346
position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute、sticky。 （1）position: static static定位是HTML元素的默认值，即没有定位，元素出现在正常的流中，因此，这种定位就不会收到top，bottom,left,right的影响。 （2）fixed定位 fixed定位是指元素的位置相对于浏览器窗口是固定位...
纯css的吸顶效果实现——使用“position:sticky”
SCUhzs
07-30 8300
文章目录一.sticky用法1.1 示例11.2 示例2二.sticky使用过程中的坑2.1 只在 Containing Block 内有效2.2 Overflow对Sticky的影响2.3.兼容问题三.应用场景3.1 表格的查看3.2 导航栏、栏目条等吸顶效果四、参考资料 一.sticky用法 使用 CSS Sticky 需要两个条件。 position: sticky; top: 0; /*top/right/bottom/left 任一有效值*/ top：0 意思是当元素滑动到距离视口 0
position: sticky 详解
seimeii的博客
09-30 454
position: sticky 详解
position:sticky 实现 按钮固定到页面顶部——基础积累
yehaocheng520的博客
02-22 1446
position:sticky 实现 按钮固定到页面顶部——基础积累
position:sticky; position:fixed;
最新发布
05-11
`position:sticky` 和 `position:fixed` 都是 CSS 中的定位属性，但它们的表现有所不同。 `position:fixed` 会将元素固定在浏览器窗口的某个位置，不受滚动条的影响，即使页面滚动，该元素也不会随之移动。通常用于...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值