第32天 说说你对HTML元素的显示优先级的理解
Activity
tzjoke commentedon May 28, 2019
没人答吗。。。这东西确实挺复杂的,要我答,只会说,z-index大的在上,一样的话一般是后面的在前面的上面。
但是实际上zindex的规则远比这复杂,它涉及到一个stacking context的东西,我们知道在使用will-change优化动画性能之前,都是使用transformZ(0)来hack,原理就是它创建了一个新的stacking context,而以我以往的经验,在一起使用transform和z-index的时候,bug率有50%😂,都是这个stacking context的问题导致zindex规则改变。
有兴趣的朋友可以看下w3c的标准,12节描述了一堆rule
tzjoke commentedon May 28, 2019
如果不是指的z-index,那这道题讲的是Visual formatting model吗
seho-dev commentedon Aug 27, 2019
这个我记得前面的已经提过了,无非就是frameset优先级最高
z-index可以提高同等级的元素的显示
再一个就是有窗口的比没窗口的高
表单元素比非表单元素优先级高
Konata9 commentedon Aug 28, 2019
本题与 Day20 类似。
帧元素(frameset) 优先级最高 >>> 表单元素 > 非表单元素,即
input type="radio"
之类的表单控件 > 普通的如a
,div
等元素。从有窗口和无窗口元素来分,有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。
z-index
属性也可以改变显示优先级,但只对同种类型的元素才有效。smile-2008 commentedon Oct 10, 2020
本题与 Day20 类似。
帧元素(frameset) 优先级最高 >>> 表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。
从有窗口和无窗口元素来分,有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。
z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。
ConstFiv commentedon Jun 9, 2021
帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。
表单元素包括:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等;
非表单元素包括:连接(a),div,table,span等。
所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括:select元素,object元素,以及frames元素等等。
无窗口元素:大部分html元素都是无窗口元素。
Iambecauseyouare commentedon Mar 17, 2023
决定元素显示层级
帧元素 > 表单元素 > 非表单元素
有窗口 > 没窗口
z-index