css的z-index权重问题 个人理解

最新推荐文章于 2023-12-15 09:38:40 发布
最新推荐文章于 2023-12-15 09:38:40 发布
阅读量300 收藏
点赞数 1
分类专栏： CSS 前端 文章标签： CSS z-index 定位 层级 覆盖
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhongheng310/article/details/114442852
版权
前端 同时被 2 个专栏收录
27 篇文章 0 订阅
订阅专栏
CSS
6 篇文章 0 订阅
订阅专栏

css的z-index权重问题

首先z-index这个属性需要在当前盒子内加上position:xxx;才能用

如果父盒子A、父盒子B都加了定位，那么谁的z-index:x 这里谁的x值谁在谁上面

如果父盒子A有子盒子a、父盒子B有子盒子b都加了定位。如果B的z-index:x 值大于A的z-index:x ，那么即使a的z-index:x值再大，a也同A一起压在B下面

 

小总结：

  • 定位的元素在没定位的元素上面
  • 同样没定位的两个盒子，其中一个盒子的子元素定位了，子元素所在的盒子在未定位的元素上面
  • 同级的父级都定位了【就不看子级了】，谁的z-index高谁在上面
  • 一个父级定位了，另一个父级没定位，但它的子级定位了，那就按照定位的子级和定位的父级看谁的z-index高谁在上面。（定位的和定位的z-index相比较）

 

Junior Tacoo
关注
专栏目录
为什么z-index不生效? 我终于搞懂了CSS层叠和层叠上下文!
LoneMouse
11-15 2045
本文主要围绕写demo时出现的问题, 对z-index, 以及元素层叠, 层叠上下文的相关内容进行简单的总结
Css层叠优先级只会这两招还远远不够
发果叁
03-16 1061
层叠上下文。是HTML中的一个三维概念，如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。一般情况下，当我们开发网页的时候，我们能看到的就是元素在页面上沿x轴y轴平铺，我们根本察觉不到元素在z轴上的层叠关系。因为这是观察者与元素显示位置的垂直距离，是抽象的。那么问题来了，层叠上下文是如何产生的？* HTML文档的根元素html标签本身就是层叠上下文（根层叠上下文* 普通元素设置position属性为非static值和设置了z-index属性为具体数值，这样就产生了层叠上下文。
css的z-index权重问题【最简洁，没有废话】
01-08
文章目录一、跟笔者一起看下面实战中z-index的几种情况：二、设置基本的dom结构与样式，准备测试三、开始测试测试问题1：测试问题2：测试问题3：测试问题4：测试问题5：四、结论五、笔者致广大读者的话 今天笔者就与大家分享一下css的z-index权重问题。到底怎么样才能让我们想要排在上面的元素能在上面，想在下面的元素就老老实实的在下面。 一、跟笔者一起看下面实战中z-index的几种情况： 一个定义了定位，一个没定义定位，谁在上面？ 一个父级盒子定位，一个不定位，不定位的子级设置定位，谁在上面？ 一个父级盒子定位，一个不定位，不定位的子级设置定位，并给定位的子级元素加z-index，谁在上
请简述你所了解的css中z-index的权重问题
最新发布
IKUNzhenin的博客
12-15 175
在CSS中，z-index属性用于指定元素的堆叠顺序。元素的堆叠顺序决定了元素在页面上的显示顺序，z-index值越大，则元素越靠前显示。当元素发生重叠时，z-index值可以用于控制元素的堆叠顺序。总结来说，z-index属性用于控制元素的堆叠顺序，可以通过定位属性和z-index值来调整元素的叠放顺序。
z-index在css中怎么用
css使多个相互之间有间隔的元素两端对齐显示
12-19 319
当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index此取值方可生效。 此属性参数值越大，则被层叠在最上面。 例子： <html> <head> <style> .z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align
php css权重,详解css z-index的权重问题
weixin_42526417的博客
04-02 126
本篇文章给大家分享一下css的z-index权重问题。到底怎么样才能让我们想要排在上面的元素能在上面，想在下面的元素就老老实实的在下面。一、一起看下面实战中z-index的几种情况：一个定义了定位，一个没定义定位，谁在上面？一个父级盒子定位，一个不定位，不定位的子级设置定位，谁在上面？一个父级盒子定位，一个不定位，不定位的子级设置定位，并给定位的子级元素加z-index，谁在上面？俩个都定位，但是...
CSS的定位和权重
weixin_57727027的博客
03-05 552
CSS定位 主要用来规定元素的定位类型。 说明：这个属性定义建立元素布局所用的定位机制。 任何元素都可以定位，不过绝对定位或固定元素会生成一个块级框，而不论该元素本身是什么类型。 相对定位元素会相对于它在正常流中的默认位置偏移。 通过设置top bottom left right 四个属性值来决定偏移位置。值可以为关键词、百分比、绝对单位 值 描述 Static 默认值，没有定位。元素出现在正常的流中。（忽略top、right、bottom、left和z-index属性） relative
CSS---总结
m0_53586574的博客
01-05 740
CSS 内部样式表 、、、 <style> div { color: red; font-size: 12px; } </style> 、、、 通过此方式，方便控制当前整个页面中的元素样式设置 但是没实现样式与结构完全分离 行内样式表 、、、 ​ 青春不常在，抓紧谈恋爱 ​ 、、、 可以控制当前的标签设置样式 外部样式表 适合于样式比较多的情况. 分为俩步： 1.新建一个后缀名为.css的样式文件，把所有css代码都放入此文件中。 2.在HTML页面中
z-index 和 ！important
ganjingjie的博客
06-12 1986
菜鸟上路有点区分不了z-index和！important的区别，所以就研究了一下： z-index的用法就是： 样式中有position属性值为absolute、relative或baifixed导致了页面重叠把想显示的页面给遮住了，这个是后就可以设置z-index值（想显示在上面的值要设置比被遮盖的页面z-index值大）就可以解决了。 !important的用法是： 提高指定样式的优先级...
!important + css动画 + css过渡效果 + 关于z-index + hr标签实际高大于设置高 + css绘制三角形 + bootstrap日历组件 + 复选框全选
Zoey_J的博客
03-31 761
html+css部分 1、可以用 !important 提高一个样式属性的优先级； 2、在css中设置动画（以眨眼为例）： ①在css中通过@keyframes设置移动方式： @keyframes dong-eyes { 0%{} 50%{ height: 2px; top: 35px; transform: rotate(0deg)...
CSS的优先级和权重
wang_zqiang的专栏
08-01 308
CSS样式优先级遵循如下： 行内样式 > id选择器 > 类选择器 > 元素选择器 在选择器优先级相同的情况下，遵循就近原则。 页面某元素在多层嵌套情况下，根据权重大小显示，权重越大优先显示。 备注： !important 表示强制应用该样式，例如：button{width:150px!important;}，与以上的选择器相遇时，强制使用此样式； 选择器类别...
cssZ-index,背景图片，权重
翟浩浩Android专栏
10-25 2959
Z-index就是z轴的方向。 html> z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。--> html> head lang="en"> meta charset="UTF-8"> title>title> style> *{ padding: 0;
css中使用'!important'使属性值有最高优先级
yangluo1683的专栏
07-28 6909
本文仅作为工作中的技术归纳和记录！.myStyle { height: 150px; width: 100%; font-size: 14px; }.myStyle { font-size: 12px; color: #ccc; }以上样式定义完成后，若html中的class应用myStyle样式，则font-size: 12px;会得到应用。（别问为什么重复
z-index优先级比较的总结
汪元会的博客
05-06 2290
z-index优先级比较的总结 说明 z-index属性在写页面的时候经常会遇到。但如果页面结构复杂且用到的z-index多我就会有点迷，下面是我的小结。 基本概念： (1)z-index是深度属性，设置元素在z轴上面的堆叠顺序。 (2)只有dom设置了position:absolute | relative | fixed 才会有z-index属性 (3)堆叠上下文：当前dom往上级找，如果该级...
z-index叠加法则解析以及无效的3种情况
分享，让视野更宽阔
07-29 658
z-index无效三种情况   父标签 position 属性为 relative；   问题标签无 position 属性（不包括 static）；   问题标签含有浮动( float )属性。 position:relative 改为 position:absolute； 浮动元素添加 position 属性（如 relative，absolute 等）； 去除浮动。 z-in...
总结影响z-index的几种情况
Eighteen Z
10-31 1140
偶尔我们在使用z-index的时候，会发现，无论怎么样增大z-index的值，都无法改变目标元素的层级。 大概有这么几种情况 position float opcity 父盒子的层级问题，当你的父盒子层级小于另一个父盒子层级的时候，你子元素的z-index再高都是没有用的。该元素的层级只在该元素所在的容器内起作用。该种情况大家应该容易理解，不过也可以看下面的例子。 &amp;amp;lt;styl...
关于定位中left和right，top和bottom的权重问题
weixin_33895516的博客
01-11 516
关于定位中left和right，top和bottom的权重问题 　　在共同类中设置了定位并且设置了left等定位，如果你引用这个类并加入其他的类中也有left和right等定位，那么你设置的right或是bottom将会无效。 　　原因：因为在定位中，left比right的权重高，top比bottom权重高，所以才无效果 　　解决办法：在共同的类中把left设置为：left：auto或者是把...
z-index详解
热门推荐
qq_39643546的博客
05-12 2万+
z-index就是堆叠上下文，它规定一个元素的堆叠顺序。一般来说，拥有更高堆叠顺序的元素会处于较低堆叠元素的前面。但是，z-index的有一些注意点，接下来一一举例。 <div id="A">A<div id="a">a</div></div> <div id="B">B<div id="b">b</div></div> div A和div B中各有一个div a和div b的子元素 #A,#B { .
CSS深度解析：从基础到高级应用
"这是一份关于CSS的个人学习笔记，主要涵盖了CSS的基础概念、选择器、字体、文本、列表、背景、盒子模型、浮动、定位等核心知识点，旨在帮助读者全面理解并掌握CSS的使用。" CSS，即层叠样式表（Cascading Style ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值