html – CSS：选择选项重叠绝对定位DIV_html-js-css

概述我有一个绝对定位的div，像工具提示一样工作。在鼠标悬停的元素上显示，然后鼠标移开。我几乎没有< select>位于工具提示元素上方的页面中的元素。通常情况下，工具提示div将显示在选择标签上。但是当用户点击选择标签并显示选项时，它与工具提示重叠。为选择或选项标签提供较高的z-index不起作用。这是一个示例代码来说明问题。 <body><h1>Select Options Overlappi 我有一个绝对定位的div，像工具提示一样工作。在鼠标悬停的元素上显示，然后鼠标移开。我几乎没有< select>位于工具提示元素上方的页面中的元素。通常情况下，工具提示div将显示在选择标签上。但是当用户点击选择标签并显示选项时，它与工具提示重叠。为选择或选项标签提供较高的z-index不起作用。

这是一个示例代码来说明问题。

<body><h1>Select Options OverlapPing absolute positioned div</h1><select name="some-name">    <option>United States</option>    <option>Canada</option>    <option>Mexico</option>    <option>Japan</option></select><div ID="top-layer">   <h2>OverlapPing div</h2></div></body>

CSS

select,options{ z-index:10;}#top-layer {    background:#ccc;    color:#000;    border:solID 1px #666;    position:absolute;    top:45px;    left:70px;    z-index:100;}

解决方法根据规格( http://docs.webplatform.org/wiki/html/elements/option)

Except for background-color and color,style settings applIEd through the style object for the option element are ignored.

因此，z-index属性被忽略，默认行为是显示文档上方所有元素的下拉列表。

总结

以上是内存溢出为你收集整理的html – CSS：选择选项重叠绝对定位DIV全部内容，希望文章能够帮你解决html – CSS：选择选项重叠绝对定位DIV所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/web/1111473.html

html – CSS：选择选项重叠绝对定位DIV

发表评论

评论列表（0条）