html页面元素优先级问题(z-index)

最新推荐文章于 2025-04-02 17:32:29 发布
原创 最新推荐文章于 2025-04-02 17:32:29 发布 · 660 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#HTML #BBS

本文探讨了在网页布局中使用 z-index 属性时遇到的层级遮盖问题，并提出了一种利用隐形 iframe 来解决 div 被 select 遮挡的方法。文中详细解释了在相对布局中 z-index 的无效性及 iframe 和 select 的优先级问题。

在开发中曾经遇到过z-index带来的页面层级遮盖问题。原帖太乱了，就发个效果图吧。

 



 

div被select隐藏的问题可以用一个隐形的iframe来解决。

DIV，SELECT，IFRAME都是绝对定位的情况下进行的。
在绝对定位的情况下，Z-INDEX是可以对他们起到作用的。

但是在页面布局实际中都是用相对进行的。只有在下拉菜单这样的情况是用绝对定位进行的。
相对布局中的元素的Z-INDEX是没有用的。

IFRAME的优先级别比SELECT框高，SELECT比DIV高
所以只有用个IFRAME隐藏显示

 

可以参考z-index在微软官网的解释。

 

【2007-8 bbs】

理解 CSS 层叠上下文：解决 `z-index` 混乱的终极指南
weixin_41455464的博客
07-03 123
它是一个独立的渲染空间，里面的元素会按照一定的规则叠在一起，最终呈现给用户。这个时候，你开始怀疑人生，怀疑 CSS，甚至开始怀疑是不是电脑出了问题，重启一百遍都解决不了。记住，层叠上下文就像一个个独立的舞台，元素只能在自己的舞台上竞争。问题，你就可以自信地说：“哼，区区层叠上下文，看我一眼就把它看穿！今天，我们就来一起扒一扒层叠上下文的底裤，彻底搞懂它，让你从此告别。里面的元素（在这个例子中没有）会形成一个独立的层叠空间，它们的。每个层叠上下文都有自己的“地盘”，在这个地盘里，元素的。
【html/css】选择器以及其优先级的问题
Denmannoob的博客
02-28 717
2.1.    标签选择器 2.1.1 通用选择 * 　　通用选择器 * 大家应该都比较熟悉了，最常用的就是 *{margin:0; box-sizing:border-box;}。mragin:0咱们在上一节已经说过，box-sizing:border-box将在后面的盒子模型那块再详细描述。 　　例如，我们在检测bootstrap3的样式时，也可以看到它用到了 * 选择器：
HTML元素的优先级
极客神殿
07-27 2773
在设计HTML页面的过程中经常会遇到表单元素覆盖样式元素引起的问题，如下图 一、HTML元素的显示优先级HTML中常用的表单元素包括：文本区域（TEXTAREA），列表框(SELECT),文本输入框，密码输入框，单选输入框，复选输入框等等。常见的非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。例如：帧
HTML选择器的优先级
fwd010627的博客
02-06 1288
选择器权重 内联样式 1,0,0,0 id选择器 0,1,0,0 类和伪类选择器 0,0,1,0 元素选择器 0,0,0,1 通配选择器 0,0,0,0 继承的样式 没有优先级 比较优先级时，需要将所有的选择器的优先级相加计算，最后优先级越高，越优先显示 （分组选择器时单独计算的） 选择器的累加不会超过其最大的数量级...
html页面层级关系,CSS z-index 层级关系优先级的概念
weixin_39532352的博客
06-05 1539
CSS 中的 z-index 属性用于设置节点的堆叠顺序, 拥有更高堆叠顺序的节点将显示在堆叠顺序较低的节点前面, 这是我们对 z-index 属性普遍的认识. 与此同时, 我们总是对堆叠顺序捉摸不透, 将 z-index 的值设得很大也未必能将节点显示在最前面. 本文将通过一些例子对 z-index 的使用方法进行分析, 并且为各位带入 z-index 层级树的概念.目录顺序规则如果不对节点设定...
【转】HTML样式优先级
独码乐，不如众码乐，乐享其中
04-07 536
样式优先级： 1、继承样式 无优先级； 2、*通配样式 优先级 0； 3、div样式 优先级 0，0，0，0； 4、.class类样式 优先级 0，0，1，0； 5、#id样式 优先级 0，1，0，0； 6、style样式 优先级 1，0，0，0； 排序：6>5>4>3>2>1
CSS z-index 层级关系优先级的概念
09-24
在CSS布局中，`z-index`属性是一个至关重要的概念，它决定了元素在页面上的堆叠顺序，即哪个元素会出现在另一个元素的前面。当我们谈论`z-index`的层级关系优先级时，我们需要理解几个基本规则。 首先，**顺序规则*...
css z-index知多少
qq_37440870的博客
08-30 1865
z-index属性指定了元素及其子元素的【z顺序】，而【z顺序】可以决定当元素发生覆盖的时候，哪个元素在上面。通常一个较大z-index值的元素会覆盖较低的那一个
一篇文章彻底搞懂css中的层叠上下文、层叠次序，不要再被 z-index 搞的头疼，包含源代码，建议收藏
最新发布
有一棵树的博客
04-02 1232
css属性中 z-index 应该如何使用，什么情况下会失效，什么是层叠上下文，不同层叠上下文之间如何比较成叠顺序，同一个层叠上下文之间的层叠顺序如何比较。在项目中如何高效管理z-index，避免出现问题。
CSS层叠与z-index示例：理解网页元素三维叠加
CSS层叠与z-index的示例代码详解 ...通过合理设置这些属性，开发者可以精确控制页面元素的视觉层次，提升用户体验。实践中，开发者需要结合元素的定位、浮动、层级以及z-index值，才能实现所需的视觉效果。
CSS z-index优先级
b305723的专栏
10-12 383
可以设置div层与层之间的优先级，上下层覆盖优先情况。 当你定义的CSS中有position属性值为absolute、relative或fixed，用z-index取值方可生效。 如果想要一个小的div 层 覆盖到另外一个大的div 层上，就可以position: absolute 转载于:https://www.cnblogs.com/zhaocundang/p/76567...
详细描述css优先级规则与代码示例
猿码互联
10-08 343
在上面的代码示例中，p选择器的权重值为0，.text选择器的权重值为1，#example选择器的权重值为2，而内联样式的权重值最高为3，因此内联样式将覆盖所有其他样式。在这个例子中，如果一个p元素同时匹配.text和p.text选择器，则p.text选择器将具有更高的优先级，并且其样式将应用于元素。CSS选择器的优先级是由四个级别的值组成，每个级别的值都有一个权重，级别的值越高，则权重越大。通常情况下，如果具有相同的权重，则后面的规则将替换前面的规则。
iframe的显示和隐藏以及zIndex的使用
小知识折射大智慧
02-11 1万+
iframe的显示和隐藏 iframe设置了style="z-index:-1; visilility:hiddle" 某种情况下设置iframe显示$('iframe').style.visilility='visible'; $('iframe').style.zIndex='2'; 在iframe中调用父类body中的元素 parent.document.getElementBy
html布局优先级,CSS 理解优先级、布局和定位
weixin_33780516的博客
06-16 482
displaynone：隐藏对象。与visibility的hidden不同，其不保存物理空间。inline：指定对象为内联元素。(默认值)。block：指定对象为块元素。inline-block：指定对象为内联块元素。内联元素(也叫行内元素)行内元素不可以设置宽(width)和高(height)，但可以与其他行内元素位于同一行，行内元素内一般不可以包含块级元素。行内元素的高度一般由元素内部的字体大...
selenium 八大定位元素之首 css 定位法，能定位 90% 以上的元素
zzhangsiwei的博客
03-21 226
#-*- codeing=utf-8 -*- #@Time:2021/3/20 15:03 #@Author:zsw #@File:csschose.py #@Software:PyCharm from selenium import webdriver wd=webdriver.Chrome() wd.implicitly_wait(5) """ url="http://cdn1.python3.vip/files/selenium/sample1.html" wd.get(url) # ele=wd.
HTML页面元素加载顺序研究报告
平安\平凡\平淡
03-26 1891
HTML页面元素加载顺序研究报告（1）----简单Div罗列       一直没有意识到HTML页面的元素加载顺序有什么重要性，至多在操作DOM对象的时候注意把DOM对象写在脚本前面。 最近研究网站首页的优化，发现加载顺序确实有很多说道，对网页的加载速度，用户体验的好坏有较大的影响。索性做了几个测试页面，用HttpWatch和FireBug做了简单的研究。       页面加载，
html 页面中内容的加载顺序(简单易懂)
qq_42475949的博客
12-04 6222
浏览器加载html 页面时的加载顺序 今天来总结一下浏览器在加载html 页面时的加载顺序，如果顺序记反或者记错的话，会对思路有受影响。我下面用最贱的的JavaScript 来进行描述。 执行顺序 简单来说： 1. head -> body 2. 如果有<script type="text/javascript">... </script>时， 同样也是从上到下加载，但是分两种情况 当需要用到document(DOM对象)来获取body体中的数据时 比如： 两种情况
html设置网页div的显示层次顺序z-index
热门推荐
夜空的流星的专栏
03-09 3万+
z-index定义和用法 z-index 属性的值设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 注释：元素可拥有负的 z-index 属性值。注释：Z-index 仅能在定位元素上奏效（例如 position:absolute;）！说明该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近（靠上层），为负数则表示离用
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值