HTML元素的显示优先级

淡淡的烟草味﹌ 2022-08-19 08:45 198阅读 0赞

一、HTML元素的显示优先级（显示层次问题，哪个在上哪个在下！ 总是显示在最前面）

帧元素>HTML元素优先，表单元素总>非表单元素优先

HTML中常用的 表单元素包括：文本区域（TEXTAREA），列表框(SELECT),文本输入框，密码输入框，单选输入框，复选输入框等等。常见的 非表单元素包括：链接标记（A），DIV标记，SPAN标记，TABLE标记等等。表单元素覆盖样式元素的根本原因在于HTML元素默认的显示优先级规则。

所有这样HTML元素又可以根据其显示要求分成两类，即有窗口的HTML元素(Windowed Element),无窗口的HTML元素（Windowless Element)。有窗口的元素包括：SELECT元素，OBJECT元素，插件，IE5.01以主更早版本中的IFRAME元素。无窗口的元素包括：大多数的普通HTML元素，如链接和TABLE标记，除了SELECT元素之外的大多数表单元素。

二、浏览器类型与显示优先级

按照浏览器类型比较，HTML元素的显示次序也有所不同，总结如下：

⑴ Netscape/Mozilla  
　　在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。

（2）Netscape/Mozilla  
　　在NS浏览器6.0以前的版本中，表单元素总是比其他HTML元素有更高的优先级。但在NS 6+浏览器中，IFRAME元素和所有表单元素的显示次序或者由CSS的z-index属性值确定，或者由它们在HTML页面中出现的次序确定，但SELECT元素除外。

⑶ Opera

在最新的Opera（7.10\*）浏览器中，包括SELECT在内的所有表单元素**根据z-index属性**或它们在HTML页面中的出现次序来确定显示优先级。但是，最新的Opera浏览器不将IFRAME作为无窗口元素显示，IFRAME被看做有窗口元素，在显示次序上要比所有无窗口元素优先。

**三、CSS的z－index属性**  
  
　　我们知道，CSS的z-index属性可以用来控制任意HTML元素显示时的覆盖次序。当多个HTML元素重叠在同一空间中时，z-index值较大的元素将覆盖z-index值较小的元素。  
  
　　但z-index属性值不是万能的。如前所述，有窗口的元素总是显示在无窗口元素的前面，z-index属性值只有在同一类元素之间才起决定作用。形象地说，有窗口元素和无窗口元素就像画在同一浏览器窗口的两块不同画布上，两类元素分别自成体系，它们的z-index属性也只相对于同一画布上的其他元素起作用。  
   
**　**