position和relative以及z-index的一些小坑坑

最新推荐文章于 2025-03-21 00:44:33 发布
最新推荐文章于 2025-03-21 00:44:33 发布
阅读量4.9k 收藏 3
点赞数 3
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38269675/article/details/88806992
版权
本文解析了CSS中relative和absolute定位的特性，特别是当应用于非父子元素与父子元素时的不同表现。详细介绍了z-index属性如何影响层叠顺序，并针对不同情况提供了具体的解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >


relative和absolute要在父元素和子元素上才有效果

当他们不是父子元素的时候，absolute其实是相对于body定位的

这里就是应证了上面的一个层叠问题，在这里z-index设置是无效的，黄色依旧被紫色覆盖了

这里把z-index设置在absolute的d上就可以了…不知道为啥单独给c设置index很大的数值是无效的…或者两个都设置…

解决：这里要分开 两个情况来说，ab 是非父子关系 cd是父子关系 给ab设置z-index是根据数值上的大小来规定层叠顺序的
但是对于属于父子关系的cd而言 他们如果是 给父c设置一个z-index无论去设置什么他都不会和他的子元素去进行比较。相当于隔离了父元素的z-index和子元素的z-index.(当然给c父设置的z-index数值包括0) 所以这两个盒子的层叠顺序依旧是按照默认的样式叠在一起 但是单独给子d设置z-index的时候（负值）他就会自动让父元素在上层了。

在不设置z-index的时候，z-index是有一个auto数值的~

小程序在canvas上层做图片滚动
a_靖的博客
05-11 2172
实现该功能踩过的坑 1.swiper的swiper-item中image图片无法在canvas的上层显示，会被canvas 覆盖 2.swiper的swiper-item 里面放cover-image 会样式错乱 3.scroll-view里面放cover-image 会样式错乱 解决方案：使用CSS样式实现，超出部分隐藏，显示滚动条 <cover-view class="popupCrad"> <cover-image class="popupCrads"..
css：四种定位（position)以及z-index层级
YangLu888
10-08 2075
css的四种定位以及z-index层级调整
relative、position与z-index
clearclearing的博客
11-30 474
Absolute，CSS中的写法是：position:absolute; 他的意思是绝对定位，他是参照浏览器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(简称TRBL)进行定位，在没有设定TRBL，默认依据父级的做标原始点为原始点。如果设定TRBL并且父级没有设定position属性，那么当前的absolute则以浏览器左上角为原始点进行定位，位置将由TRBL决定。 一般来讲
css---相对定位和z-index的使用
weixin_46218101的博客
09-27 914
前端入门笔记之css（6） 定位 1、CSS 定位 (Positioning) 属性允许你对元素进行定位。 2、定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置 3、CSS 有三种基本的定位机制：普通流、浮动和绝对定位。 4、固定定位：fixed 相对定位：relative 绝对定位：absolute 静态定位：static 集成定位：inherit 常用属性: 1、position:把元素放置到一个静态的,相对的，绝对的，或固定的
CSS定位、图标与修饰属性
最新发布
2301_82023822的博客
03-21 737
目录一、定位方式（Positioning）1. 相对定位（position: relative）2. 绝对定位（position: absolute）3. 固定定位（position: fixed）4.定位居中二、堆叠顺序（z-index）三、CSS 精灵（CSS Sprites）四、字体图标（Icon Fonts）五、修饰属性1. 透明度（opacity）2. 光标类型（cursor）示例1：示例2：作用：相对于元素自身原始位置进行偏移，不脱离文档流。属性： / / / ：偏移距离。示例：
position属性与z-index属性详解，如何比较z-index值确定覆盖关系，为何z-index属性不生效。
AIWWY的博客
03-18 1877
目录 position属性含义 absolute relative fixed z-index含义 比较规则 注意 position属性含义 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 absolute 设置后处在原本出生位置，定位是相对设置了absolute、relative或fixed的上级元素进行定位，当所有的父级都无这些属性时，相对整个页面设置，不是相对body，因为body4面
07 CSS-相对定位、绝对定位、固定定位、z-index
路遇惊喜
12-08 8114
定位有三种，分别是相对定位、绝对定位、固定定位。 1、相对定位：position:relative; 2、绝对定位：position:absolute; 3、固定定位：position:fixed; 4、关于z-index
浅析CSS——元素重叠及position定位的z-index顺序
热门推荐
gyflyx的专栏
04-06 1万+
转载地址： http://www.cnblogs.com/mind/archive/2012/04/01/2198995.html 多次在项目中遇到html页面元素的非期待重叠错误，多数还是position定位情况下z-index的问题。其实每次解决类似问题思路大致都是一样的，说到底还是对z-index的理解比较模糊，可以解决问题却不大了解其原因，导致重复出错......于是决定把重叠问题弄
html固定按钮相对位置,CSS基础之相对定位，绝对定位，固定定位，z-index
weixin_42306480的博客
06-04 2265
1.相对定位1.1.相对定位，就是微调元素位置的。让元素相对自己原来的位置，进行位置调整。也就是说，如果一个盒子想进行位置调整，那么就要使用相对定位a position:relative; → 必须先声明，自己要相对定位了b left:100px; → 然后进行调整。c top:150px; → 然后进行调整。Documentdiv{width: 200px...
微信小程序scroll-view锚点定位+界面滑动改变tab（防京东详情页）
随身笔记
01-20 6521
电商详情页的锚点定位+tab切换+滑动切换
微信小程序-自定义NavBar组件（1）
王亟亟的博客
05-14 1万+
转载请注明出处：王亟亟的大牛之路 最近公司项目忙得不可开交，各种不可描述的事情，然后学习基本停机。这个周末没出去浪，就在家把之前王夫人给我设计的小程序做了做，然后一步步分享做的过程中遇到的问题和积累，希望大家爬坑过程中能帮到一些吧 组件化 组件化本身是一个可以讲的很大，也可以浓缩为 封装可复用的，模版组件 基于mvvm的微信小程序当然也支持这一特性，我们做项目的时候也可以把注...
微信小程序-导航吸顶+view锚点
Strive-luo的博客
04-11 2124
微信小程序--导航吸顶+view锚点导航栏滑动定位+view锚点效果图实现原理WXMLWXSS主页面JS-主页面JS-主页面子页面-newcontent子页面-sticky子页面-uploadfile 导航栏滑动定位+view锚点 我们在做小程序的时候，难免会遇到页面里面有很长的数据，页面下面又有到导航栏部分；用户希望页面滑动到导航栏的位置，导航栏固定在页面的最上面，同时里面的数变化，也能改变导航...
position:relative可以默认提升元素的z-index;
weixin_33884611的博客
04-08 237
position:relative可以默认提升元素的z-index; 相对没有添加position的元素来说； 转载于:https://www.cnblogs.com/suoking/p/5369067.html
当relative遇上z-index，阻断事件捕获
weixin_30645617的博客
06-27 311
今天在调试前端页面的时候，发现addflowrank这个元素的click事件不能触发了。下图是它的元素结构。 用开发者工具试图定位这个元素，看看它到底怎么了。发现：无论我怎么用光标定位这个元素都定位不到，像是被外层div锁在里面了。我开始以为是不是什么冒泡机制在作怪，调试了一会发现不对。 我看见父div上有position：relative 和 z-index。我看是不是父级标签层次太...
css之relative
ccxCode的博客
08-06 251
relative和absolute的关系 限制作用 限制left/top/right/bottom定位；（这一点大家开发肯定都很熟悉了） 限制z-index层级； 限制在overflow下的嚣张气焰； 对于第2点，上代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
Android初试--RelativeLayout（相对布局）
guizhaiteng的专栏
03-23 705
RelativeLayout（相对布局）      RelativeLayout允许子元素指定他们相对于其它元素或父元素的位置（通过ID指定）。因此，你可以以右对齐或上下，或置于屏幕中央的形式来排列两个元素。元素按顺序排列，因此如果第一个元素在屏幕的中央，那么相对于这个元素的其它元素将以屏幕中央的相对位置来排列。如果使用XML来指定这个layout，在你定义它之前，被关联的元素必须定义。   
transformer中的相对位置偏置的介绍（relative position bias）
我的博客有点东西
08-23 1万+
前言 在很多近期的transformer工作中，经常提到一个词： relative position bias。用在self attention的计算当中。笔者在第一次看到这个概念时，不解其意，本文用来笔者自己关于relative position bias的理解。 笔者第一次看到该词是在swin transformer。后来在focal transformer和LG-transformer中都看到它。 relative position bias(相对位置偏置) 基本形式如下： Attention(Q,K
一些css基础学习笔记
weixin_33906657的博客
07-30 181
relative 1.当父元素设置了relative的zindex，子元素为absolute时，设置zindex无效2.当父元素relative设置了overflow：hidden时，子元素absolute超出父元素部分无效3.relative只能限制fix的zindex层级4.Relative相当于自身进行定位，absolute相对于边...
Android学习笔记---布局方式(二)(RelativeLayout,TableLayout布局)
weixin_30500105的博客
12-10 150
Android学习笔记 RelativeLayout,TableLayout布局 一.RelativeLayout相对布局方式. RelativeLayout顾名思义，相对布局，在这个容器内部的子元素们可以使用彼此之间的相对位置或者和容器间的相对位置来进行定位。 注意：不能在RelativeLayout容器本身和他的子元素之间产生循环依赖，比如说，不...
.layui-m-layer { position: relative; z-index: 19891014 }
05-04
这段 CSS 代码是用于设置 Layer 弹出层的样式。其中，position: relative; 表示该元素相对于其原先的位置进行定位，而不是相对于文档进行定位；z-index: 19891014 则是设置该元素的层级，使其位于其他元素之上，避免被其他元素遮挡。19891014 这个数字可能是开发者的某个纪念日或者意义特殊的数字。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值