关于sticky和z-index的几个小坑

幻magic想

已于 2022-09-09 11:53:01 修改

阅读量942

点赞数

分类专栏：前端从零到一文章标签： css3 css

于 2022-09-09 11:48:35 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_52447755/article/details/126780009

版权

前端从零到一专栏收录该内容

7 篇文章

订阅专栏

position：sticky

首先说说注意点

position:sticky;
设置top或left等定位
注意一般是给外层容器设置，当然也可以根据需求调整

神坑

某次我给设置了sticky的节点的兄弟节点设置了max-height，但是实际高度是大于最大高度的，这就会有划到一定高度后设置了sticky的节点不见了，所以要注意高度不能大于最大高度

z-index假失效

要注意设置z-index的节点背景色是不是透明的，不然真的要找很久bug，设置下背景色就好了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

幻magic想

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

CSS定位与层级

weixin_43339112的博客

06-06

637

CSS定位 CSS通过定位属性可以将元素摆放到页面的任意位置。属性名：position 属性值： static 默认值，元素是静止的没有开启定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 sticky 粘滞定位相对定位relative 开启元素的相对定位以后，如果不设置偏移量元素不会发生任何变化偏移量中的定位位置/参照物：元素在文档流中的原位置相对定位不会元素脱离文档流，不会改变元素的性质（行内/块元素）相对定

【高频考点精讲】CSS定位全解析：static、relative、absolute、fixed、sticky的区别和应用场景

最新发布

全栈老李的博客

05-05

945

🧑‍🏫：全栈老李📅：2025 年 5 月🧑‍💻：前端初学者、进阶开发者🚀：本文由全栈老李原创，转载请注明出处。今天咱们聊聊CSS定位这个看似简单实则暗藏玄机的话题。我是全栈老李，一个在代码海洋里摸爬滚打多年的老司机。定位(position)这个属性，表面上看就几个值，但用起来却能让不少新手掉坑里。不信？咱们慢慢聊。

参与评论您还未登录，请先登录后发表或查看评论

CSS定位

叶子yes的博客

07-25

630

上面文字比较多，下面进行简单总结一下1、静态定位static默认值2、相对定位relative相对元素当前位置进行定位，不脱离文档流3、绝对定位absolute相对最近有定位的祖先元素进行定位（如果都没有定位，则相对body进行定位），脱离文档流4、固定定位fixed相对浏览器视口进行定位，脱离文档流5、粘滞定位stickyrelative+fixed，相对定位达到阈值就是固定定位，不脱离文档流当元素移动到top=0的位置时，使用固定定位，固定在top=0的位置上。...

position:sticky特性（坑）总结

huang100qi的专栏

02-11

1171

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

css中position属性的取值：relative absolute fixed sticky的含义？以及属性z-index理解

liweibo348的博客

09-17

627

relative：表示相对定位，是相对对于自身原始位置的定位，记住是是自身。 absolute：绝对定位。是相对于设置了绝对定位的父元素的位置，若父元素没有设置绝对定位，那么就相对于窗体进行绝对定位。 fixed：固定的位置。一般用作悬浮按钮的设计。不管当前页面如何滚动，它的位置始终相对于窗体不变。 sticky：粘贴到某个位置。当组件设置了该属性值后，当页面滑动时，组件会跟着页面移动，当组...

position设置定位属性 absolute绝对定位 fixed固定定位 relative相对定位 sticky粘性定位 z-index设置定位元素的层叠顺序锚点链接透明

Lgw_zuiyouxiu的博客

07-17

831

1.position 设置定位属性 static 默认值，没有定位，静态定位，相对没有属性position属性的元素都是static定位 2.absolute 绝对定位会使元素脱离文档流，不需要去解决绝对定位会产生一个块级框，不管之前是何种元素，都可以设置宽高包含块：根据距离其最近的具有定位设置的父元素进行位置的偏移，静态定位除外，如果所有的父元...

ios (12.0.1) 中position: sticky属性，导致z-index属性失效

id_ip的博客

06-10

2623

在部分ios系统中(12.0.1) ，h5页面，在元素上设置position: sticky属性进行固定元素，会导致其z-index失效。解决方法：可以将sticky值改为fixed

微信小程序scroll-view锚点定位+界面滑动改变tab（防京东详情页）

随身笔记

01-20

6547

电商详情页的锚点定位+tab切换+滑动切换

前端面试小总结

wust_cyl的博客

03-04

502

HTML部分： 1：请你说说Doctype的作用。答：用于告知浏览器的解析器用什么文档标准解析这个文档。HTML文档包含形式完整的DOCTYPE，那么他一般以标准模式呈现。DOCTYPE不存在或者格式不正确会导致文档已混杂模式呈现。<!Docutype html>告知浏览器以html5的文档标准解析这个文档。 2：请你说一下<head>标签中能够写那些标签。答：...

nginx总结第四章----nginx模块与指令详解

qq_26312651的博客

02-17

900

四 nginx模块官方提供了5个类型的模块:核心模块、配置模块、事件模块、http模块、mail模块。配置模块主要负责解析nginx.conf文件,是其他模块的基础,该类模块中只有一个ngx_conf_module模块; 核心模块主要负责定义除配置模块之外的其他模块,该类模块中有6个核心模块。 ngx_mail_module负责定义mail模块; ...

GPU加速是什么

前端栈开发

07-06

2366

GPU加速是什么by 被单 on 2017-04-11众所周知，网页不仅应该被快速加载，同时还应该流畅运行，比如快速响应的交互，如丝般顺滑的动画……一. GPU 加速能做什么？首先我们要了解什么是 16ms 优化大多数设备的刷新频率是 60 次/秒，（1000/60 = 16.6ms）也就说是浏览器对每一帧画面的渲染工作要在 16ms 内完成，超出这个时间，页面的渲染就会出现卡顿现象，影响用户体验...

z-index深入理解

weixin_30690833的博客

08-26

318

【CSS深入理解之z-index】听课总结 (http://www.imooc.com/learn/643) 一、z-index基础知识 1.z-index的含义　z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大的z-index值的元素会覆盖较低的那一个。 2.属性值　z-index:auto; 默认值 ...

CSS中z-index元素的层级

weixin_46177342的博客

10-27

278

z-index元素层级相关

z-index

EmotionComputer

08-08

506

在css2.1时代，z-index只有配合定位属性才能够起作用，如position: absolute position:relative position:fixed,当然在最新的position: sticky也起作用。在css3时代，z-index还可以应用在过渡动画上，比如： @keyframes zindex { 0% { z-index: -1;} 100% { z-index: 50; } } css 中的层叠上下文和层叠水平 ...

CSS_布局(position定位：static，relative，absolute，fixed，sticky，z-index)

骑大马挎大刀

01-13

327

CSS定位（position）： /* 静态定位: 默认值。正常文档流，从上到下，从左到右 */ position:static; /* 相对定位：相对于该元素的默认位置。确定它的默认位置之后，通过left,top,right,bottom属性设置位置的偏移,偏移是相对于默认位置的。但是它所占用的空间还保留在原位(默认位置),其他元素不会挤占它原本的空间 */ .box{ position:relative; left:15px; top:10px } /* 绝对定位：相对于父级盒子的定位。用于

深入理解css中position属性及z-index属性

weixin_33835103的博客

11-29

685

深入理解css中position属性及z-index属性　　在网页设计中，position属性的使用是非常重要的。有时如果不能认识清楚这个属性，将会给我们带来很多意想不到的困难。　　position属性共有四种不同的定位方法，分别是static、fixed、relative、absolute,sticky。最后将会介绍和position属性密切相关的z-index属性。第一部分：...

CSS定位布局：静态定位、相对定位、绝对定位、固定定位、粘滞定位、Z-index定位

qq_51066068的博客

03-18

5601

目录 1.定位布局 1.1.静态定位（ Static positioning）简单代码实现： - 1.2.什么是相对定位?（ Relative positioning ）简单代码实现： - 1.3.什么是绝对定位?（Absolute positioning） - 绝对定位参考点效果图： -绝对定位水平居中 - 1.4.固定定位（Fixed positioning） - 1.5.粘滞定位（ Sticky positioning ） position: sticky; ...

容易忽视的CSS3粘性定位position sticky

weixin_45709829的博客

03-26

2562

CSS3粘性定位position sticky 一、介绍 css3中新的定位属性，本身也具有定位元素的属性理解为相对定位position:relative + 固定定位position:fixed的混合体 position:sticky粘性定位，基于用户的滚动定位二、基本原理依赖用户的滚动定位，行为像position:relative，当页面滚动超出目标区域，行为表现为position:fixed 什么是目标区域相对父元素，超出阈值，这个阈值通过top、left、right、bottom确定滚动元

深度解析 z-index

qq_47443027的博客

07-28

1838

没有使用z-index该元素的position是否是static，如果是static，那么这个元素就称为；反之，如果position值是relative,absolute,fixed,或sticky则称positioned。positioned元素享受特权，会覆盖元素。而元素中，有float样式的元素覆盖没有float的。元素的“出场”顺序——即在html中的顺序，同类型元素遵循后来者居上的原则。z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。z-indexz轴。...

position: fixed和position: sticky的z-index

01-16

尽管两个盒子都设定了较高的 `z-index`,但是由于它们分别属于不同的层叠上下文(`fixed` 对应的是全局而 `sticky` 则依赖于它的包含块)，所以最终呈现出来的效果可能会有所不同取决于具体的浏览情况和其他样式规则的...