最拼爹的css属性：z-index失效情况记录

最新推荐文章于 2022-09-04 21:00:05 发布
最新推荐文章于 2022-09-04 21:00:05 发布
阅读量195 收藏
点赞数
分类专栏： 前端问题 文章标签： css总结
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duanxingming123/article/details/101453119
版权

最近自己用angular封装了一个多级下拉菜单的控件，使用过程中发现一个奇怪的bug

第一反应是菜单z-index太小，被覆盖了，结果设置成9999都没有效果。

调试样式后发现，是因为引用菜单控件的时候，父元素的position为fixed，右边控件的position为relative，而菜单父元素没有设置默认的z-index，给父元素添加z-index后，得到满意效果。

  

总结：z-index是一个拼爹的属性，如果父元素不争气，子元素再高也没用

还是孤鹰
关注
专栏目录
CSS-day-38
qq_47726356的博客
11-16 640
2021.11.16 盒子模型 、盒子模型 其实，CSS就三个大模块：盒子模型、浮动、定位，其余的都是细节。要求这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。 这里略过老旧的ie盒子模型（IE6以下），对不起，我都没见过IE5的浏览器。 首先，我们来看一张图，来体会下什么是盒子模型。 所有的文档元素（标签）都会生成.
css-13. 定位
weixin_43552734的博客
03-05 1195
定位 脱离文档流的常用三种方式：浮动、绝对定位、固定定位 position：设置定位方式 relative：相对定位 absolute：绝对定位 fixed：固定定位 static：静态定位（默认值） 相对定位 相对定位：相对元素原有位置进行定位 设置position为relative后，会激活top、bottom、left、right四个属性。其中top和left的优先级更高 top、bottom、left、right： 正值：向中心方向偏移 赋值：向边缘方向偏移 特性：相对定位元素没有脱离文档流
前端-css-z-index失效问题
qq_40703860的博客
08-12 384
前端-css-z-index失效问题 1、一般z-index的使用是在有两个重叠的标签，在一定的情况下控制其中一个在另一个的上方出现。 2、z-index值越大就越是在上层。z-index：9999；z-index元素的position属性要是relative，absolute或是fixed。 3、z-index在一定的情况下会失效。 ①、父元素position为relative时，子元素的z-index失效。 解决：父元素position改为absolute或static ②、该元素没有设置positio
z-index用法总结
乐子
09-11 377
1.z-index属性要结合position属性才能发挥作用，即通过设置position:relative;和position:absolute;进而再设置z-index属性才可以； 2.只在一个地方设置z-index属性在某些地方就不起作用，如在Android的app中，必须设置某一个元素的z-index属性比另一个元素的z-index属性大或者小才起作用； 今天，先总结这两点，不断完善中...
深度解析 z-index
qq_47443027的博客
07-28 1640
没有使用z-index该元素的position是否是static，如果是static，那么这个元素就称为；反之，如果position值是relative,absolute,fixed,或sticky则称positioned。positioned元素享受特权，会覆盖元素。而元素中，有float样式的元素覆盖没有float的。元素的“出场”顺序——即在html中的顺序，同类型元素遵循后来者居上的原则。z-index属性设定了一个定位元素及其后代元素或flex项目的z-order。z-indexz轴。...
z-index属性
jwz934738949的博客
05-10 1027
在定位流中，定位流默认会覆盖标准流的元素；另外，后写的定位流元素也会覆盖之前的定位流元素。 通过设置z-index的值来判断由哪个元素进行覆盖。 z-index值较大的会覆盖值小的元素。注意当父元素设置了z-index后，子元素的z-index值会失效，父元素值大，子元素会覆盖父元素小的那个子元素。 <!DOCTYPE html> <html lang="en"> ...
你真的了解z-index属性了吗?
前端小工
08-24 6342
在编码的过程中,我们常常用z-index去控制元素的层叠顺序.那么我们真的了解它了吗?z-index的语法:(参考W3C文档) 属性 值 Value auto integer inherit Initial auto Applies to positioned elements Inherited no Percentages N/A Media
CSS基础知识整理
菜鸟博客
11-05 2593
目录一、css基础1.选择器1.1标签选择器1.2类选择器1.3id选择器1.4后代选择器1.5子代选择器1.6并集选择器1.7交集选择器1.8hover伪类选择器1.9通配符选择器1.10结构伪类选择器1.10.1查找单个1.10.2查找多个1.10.3 根据类型查找1.11 类与id的区别1.11链接伪类选择器1.12焦点伪类选择器1.13属性选择器2.字体文本相关样式2.1字体样式2.1.1字体大小font-size2.1.2字体粗细font-weight2.1.3字体样式font-style2.1.
HTML 与 CSS
LemonStars的博客
07-13 738
新手所学基础：html与css样式
CSS内容简记
weixin_45948181的博客
09-04 1807
写网页时方便查看的知识点，省一省搜索的功夫
html05 overflow和z-index的用法
wuhan_yking的博客
10-08 917
一、overflow ①含义 overflow 属性规定当内容溢出元素框时发生的事情 ②值 值 描述 visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
angular中ng-repeat的track by 的使用（$index）
Eighteen Z
05-08 1万+
在angular中使用ng-repeat时数组中有重复元素 当我们在循环的数组中存在有重复的元素时候，angular的ng-repeat就会报错，那是因为其不允许collection有相同的id（相同的元素会形成相同的id）出现。而基本的数据类型它的id就是它自身的值。 我们要避免这种情况通常会使用track by $index 来让其生成自己不同的id，这样是最常用的直接通过索引来生成id。...
CSS 之 z-index 属性详解
热门推荐
weixin_45092437的博客
08-26 6万+
`z-index`属性是用来设置元素的堆叠顺序或者叫做元素层级，`z-index`的值越大，元素的层级越高。当元素发生重叠时，层级高的元素会覆盖在层级低的元素的上面，使层级低的元素的重叠部分被遮盖住。 当父元素设置了`z-index`属性时，子元素的`z-index`属性只与同级元素和父级元素作比较时才有意义，与其他元素对比时无意义。此时子元素与父元素外的所有的外部元素进行堆叠层级顺序对比时，都以父元素的`z-index`属性值为准进行对比，子元素本身的`z-index`属性值无效。...
z-index的使用小结
runner_123的博客
10-23 3万+
1、z-index定义 z-index 属性指定一个元素的堆叠顺序。 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 2、使用 （1）必须在定位元素（position:relative/absolute/fixed/sticky）上才有效 （2） 可以有负值 （3）不同父元素的子元素之间进行显示时，会根据父级元素的z-index进行渲染. 3、z-index不起作用的...
【不一样的CSS】深入理解 z-index （我们一起来叠罗汉)
一碗周
12-23 1794
写在前面 对 CSS 布局掌握程度决定你在 Web 开发中的开发页面速度。随着 Web 技术的不断革新，实现各种布局的方式已经多得数不胜数了。 最近利用碎片时间，大概用了半个月的时间整理了一个系列，本系列文章总结了 CSS 中的各种布局，以及实现方式及其常用技巧。让你通过该系列文章对 CSS 布局有一个新的认识。 该系列的导航帖点我进入，里面可以快速跳转到你想了解的文章(建议收藏) z-index 含义 z-index 属性制定了元素及其子元素的 在 Z 轴上面的顺序，而 Z 轴上面的顺序 可以决定当元素发
z-index负值深入理解
冰雪为融的博客
07-06 1万+
补充点小知识：CSS3与新时代的层叠上下文：css3之前，可能我们说会影响层叠上下文的也就position属性了，那CSS3时代的到来，对层叠上下文规则带来了新的影响，css3时代会影响层叠上下文的除了定位还有：元素为flex布局元素（父元素display:flex|inline-flex），同时z-index值不为auto元素的opacity值不是1元素transform值不是none元素的fi...
关于z-index的详细解释
SmileRM的博客
12-15 1万+
测试的浏览器：IE，chrome <div id="no-style"> <div id="div1" class="test-div" style="background:#0c8484;">11111 <div id="test-position" class="has-position-absolute">11111的子元素</div> </
关于z-index 那些你不知道的事
果果的小窝
01-12 519
CSS当中的z-index属性看起来足够简单，但是如果你真的想了解它是如何工作的话，在这简单的表面之下，又有许多值得探究的内容。 在这篇教程中，通过探究层叠上下文和一系列实际的例子，我们将会阐明z-index的内在机理。 CSS为盒模型的布局提供了三种不同的定位方案： 常规文档流浮动绝对定位 其中最后一种定位方案将一个元素从常规流中移除，完全依赖开发者来确定元素显示的位置。 通过赋予t
z-index的理解
斜杠青年博客
03-11 5263
z-index 属性是设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序 较低的元素的前面。 1、元素可拥有负的 z-index 属性值。 2、Z-index 仅能在定位元素上奏效（例如 position:absolute;）。 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如 果为正数，则离用户更近，为负数则表示离用户更远。 它可能出现的值： ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值