gpt4 book ai didi

html - 如何选择与绝对定位 DIV 重叠的选项?

转载 作者:技术小花猫 更新时间:2023-10-29 12:11:59 27 4
gpt4 key购买 nike

我有一个绝对定位的 div,它像工具提示一样工作。在鼠标悬停在某个元素上时它会显示,然后在鼠标移出时隐藏。我很少<select>页面中放置在工具提示元素上方的元素。在正常情况下,工具提示 div 将出现在选择标签上。但是,当用户单击选择标签并显示选项时,它会与工具提示重叠。为 select 或 options 标签提供更高的 z-index 无效。

enter image description here

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

<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;
}

最佳答案

没有 position 属性(绝对、相对、固定等)的元素将应用 z-index 值。

尝试将 position:relative 添加到您的 select 以便它继承 z-index 值。

See this screencast for a more in depth explanation.

关于html - 如何选择与绝对定位 DIV 重叠的选项?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8188353/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com