Skip to content

[html] 第32天 说说你对HTML元素的显示优先级的理解 #114

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第32天 说说你对HTML元素的显示优先级的理解

Activity

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

没人答吗。。。这东西确实挺复杂的,要我答,只会说,z-index大的在上,一样的话一般是后面的在前面的上面。
但是实际上zindex的规则远比这复杂,它涉及到一个stacking context的东西,我们知道在使用will-change优化动画性能之前,都是使用transformZ(0)来hack,原理就是它创建了一个新的stacking context,而以我以往的经验,在一起使用transform和z-index的时候,bug率有50%😂,都是这个stacking context的问题导致zindex规则改变。
有兴趣的朋友可以看下w3c的标准,12节描述了一堆rule

tzjoke

tzjoke commented on May 28, 2019

@tzjoke

如果不是指的z-index,那这道题讲的是Visual formatting model吗

seho-dev

seho-dev commented on Aug 27, 2019

@seho-dev

这个我记得前面的已经提过了,无非就是frameset优先级最高
z-index可以提高同等级的元素的显示
再一个就是有窗口的比没窗口的高
表单元素比非表单元素优先级高

Konata9

Konata9 commented on Aug 28, 2019

@Konata9

本题与 Day20 类似。

帧元素(frameset) 优先级最高 >>> 表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

从有窗口和无窗口元素来分,有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。

z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。

smile-2008

smile-2008 commented on Oct 10, 2020

@smile-2008

本题与 Day20 类似。

帧元素(frameset) 优先级最高 >>> 表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

从有窗口和无窗口元素来分,有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。

z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。

ConstFiv

ConstFiv commented on Jun 9, 2021

@ConstFiv

帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。
表单元素包括:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等;
非表单元素包括:连接(a),div,table,span等。
所有的html元素又可以根据其显示分成两类:有窗口元素以及无窗口元素。有窗口元素总是显示在无窗口元素的前面。
有窗口元素包括:select元素,object元素,以及frames元素等等。
无窗口元素:大部分html元素都是无窗口元素。

Iambecauseyouare

Iambecauseyouare commented on Mar 17, 2023

@Iambecauseyouare

决定元素显示层级
帧元素 > 表单元素 > 非表单元素
有窗口 > 没窗口
z-index

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @smile-2008@haizhilin2013@Konata9@tzjoke@seho-dev

        Issue actions

          [html] 第32天 说说你对HTML元素的显示优先级的理解 · Issue #114 · haizlin/fe-interview