Skip to content

[html] 第20天 请描述HTML元素的显示优先级 #66

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

第20天 请描述HTML元素的显示优先级

Activity

git710

git710 commented on May 8, 2019

@git710

在html中,帧元素(frameset)的优先级最高,表单元素比非表单元素的优先级要高。

  • 表单元素:
    • 文本输入框,密码输入框,单选框,复选框,文本输入域,列表框等等
  • 非表单元素
    • 链接(a),div, table, span 等等

有窗口元素比无窗口元素的优先级高

  • 有窗口元素
    • select元素,object元素,以及frames元素等等
  • 无窗口元素
    • 大部分html元素都是无窗口元素
Konata9

Konata9 commented on Aug 4, 2019

@Konata9

HTML 元素显示优先级简单来说就是:帧元素(frameset) 优先级最高(frameset 已经不提倡使用了)。其次表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

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

另外 z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。如果两个元素分别为 表单元素非表单元素 那么 z-index 是无效的。在这个例子中可以看到,select 就是在 div 的上面,尽管 div 设置了 z-index:100;

参考文章:HTML 元素的优先级

justfn

justfn commented on Sep 9, 2019

@justfn

HTML 元素显示优先级简单来说就是:帧元素(frameset) 优先级最高(frameset 已经不提倡使用了)。其次表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

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

另外 z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。如果两个元素分别为 表单元素非表单元素 那么 z-index 是无效的。在这个例子中可以看到,select 就是在 div 的上面,尽管 div 设置了 z-index:100;

参考文章:HTML 元素的优先级

z-index 不是针对的定位元素来说的吗, 这个div没有使用定位, z-index肯定不生效啊
话说HTML显示优先级还是第一次听说 😅

wython

wython commented on Dec 10, 2019

@wython

HTML 元素显示优先级简单来说就是:帧元素(frameset) 优先级最高(frameset 已经不提倡使用了)。其次表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。
从有窗口和无窗口元素来分,有窗口元素 > 无窗口元素。有窗口元素如 Select 元素、Object 元素。
另外 z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。如果两个元素分别为 表单元素非表单元素 那么 z-index 是无效的。在这个例子中可以看到,select 就是在 div 的上面,尽管 div 设置了 z-index:100;
参考文章:HTML 元素的优先级

z-index 不是针对的定位元素来说的吗, 这个div没有使用定位, z-index肯定不生效啊
话说HTML显示优先级还是第一次听说

一般都是叫层级,叫优先级也是第一次听说

smile-2008

smile-2008 commented on Sep 18, 2020

@smile-2008

HTML 元素显示优先级简单来说就是:帧元素(frameset) 优先级最高(frameset 已经不提倡使用了)。其次表单元素 > 非表单元素,即 input type="radio" 之类的表单控件 > 普通的如 a,div 等元素。

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

另外 z-index 属性也可以改变显示优先级,但只对同种类型的元素才有效。如果两个元素分别为 表单元素 和 非表单元素 那么 z-index 是无效的。在这个例子中可以看到,select 就是在 div 的上面,尽管 div 设置了 z-index:100;

amikly

amikly commented on Nov 7, 2021

@amikly

帧元素(frameset)的优先级最高(frameset 已经不提倡使用了)
表单元素比非表单元素的优先级高
有窗口元素比无窗口元素的优先级高

Hub-ShengQing

Hub-ShengQing commented on May 18, 2022

@Hub-ShengQing

✂【回答】
元素的显示优先级,即元素覆盖次序的规则。显示优先级规则如下:

  1. 帧元素(frameset)> 表单元素 > 非表单元素;
  2. 有窗口元素 > 无窗口元素;
  3. 同一类元素间,z-index 值大的元素 > z-index 值小的元素。

🖊【便签】

  • 表单元素:文本输入框、密码输入框、单选框、复选框、文本输入域、列表框等等;
  • 非表单元素:a、div、table、span 等等;
  • 有窗口元素:select 元素、object 元素、frames 元素等等;
  • 无窗口元素:大部分 html 元素都是无窗口元素,如 a、table 等等。

♡【关注】
https://blog.csdn.net/Hewes

Iambecauseyouare

Iambecauseyouare commented on Mar 5, 2023

@Iambecauseyouare

HTML元素的显示优先级:
1.帧元素>表单元素>非表单元素
表单元素:文本输入框,密码输入框,单选框,复选框,文本输入域,列表框
非表单元素:a,div,table,span
2.有窗口元素>无窗口元素
有窗口元素:select,object,插件,frames
无窗口元素:大部分HTML元素都是,如a和table
3.css的z-index属性

lili-0923

lili-0923 commented on Feb 29, 2024

@lili-0923
  1. 帧元素(frameset)> 表单元素 > 非表单元素;
  2. 有窗口元素 > 无窗口元素;
  3. 同一类元素间,z-index 值大的元素 > 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@wython@justfn

        Issue actions

          [html] 第20天 请描述HTML元素的显示优先级 · Issue #66 · haizlin/fe-interview