HTML 元素的显示优先级由多种因素决定，主要包括以下几个方面：
-
CSS
display属性: 这是最直接影响元素显示方式的属性。不同的display值具有不同的优先级，大致可以分为以下几类：none: 最高优先级，元素完全不显示，也不占据任何空间。inline-block,inline-flex,inline-grid: 内联块级元素，在行内显示，可以设置宽度和高度。inline: 内联元素，在行内显示，宽度和高度由内容决定，无法设置。block,flex,grid,table,list-item等块级元素: 独占一行，可以设置宽度和高度。
一般来说，
none>block>inline-block>inline。 更准确地说，块级元素会覆盖内联元素，而display: none会覆盖所有其他display值。 -
CSS
position属性:position属性也会影响元素的显示优先级，特别是fixed和sticky。fixed: 固定定位，相对于浏览器窗口定位，脱离文档流，层级最高。会覆盖其他非 fixed 定位的元素。sticky: 粘性定位，在正常文档流中，直到满足特定条件（例如滚动到特定位置）才变为固定定位。relative,absolute,static: 相对、绝对和静态定位，它们之间的层级关系主要通过z-index属性控制。
-
CSS
z-index属性:z-index属性控制元素的堆叠顺序，值越大，层级越高，会覆盖值较小的元素。需要注意的是，z-index仅对定位元素（position值为relative,absolute,fixed或sticky）有效。 -
HTML 元素的嵌套关系: 在没有其他样式影响的情况下，后出现的元素会覆盖先出现的元素。例如，如果两个元素重叠，后面的元素会显示在前面元素的上面。
-
CSS
float属性: 浮动元素会脱离文档流，并向左或向右移动，直到碰到包含块的边缘或另一个浮动元素。浮动元素会覆盖非浮动元素，但会被定位元素覆盖。 -
CSS
opacity属性:opacity属性设置元素的透明度，值越小，透明度越高。透明元素不会遮挡其后面的元素，而是与其后面的元素进行alpha混合。
总结:
元素的显示优先级是一个综合考虑多个因素的结果，没有简单的单一规则。一般来说，display: none 具有最高的优先级，其次是 position: fixed，然后是 z-index 值较大的元素。在其他情况下，需要根据具体情况综合考虑 display、position、z-index、float、opacity 以及元素的嵌套关系等因素来判断元素的显示优先级。
希望以上解释能够帮助你理解 HTML 元素的显示优先级。
标签：index,优先级,元素,HTML,inline,display,属性 From： https://www.cnblogs.com/ai888/p/18560415