小编San*_*aul的帖子

如何选择与绝对定位DIV重叠的选项？

我有一个绝对定位的div,就像工具提示一样.鼠标悬停在它显示的元素上,然后隐藏鼠标.我<select>在页面中有很少的元素放在工具提示元素上面.在正常情况下,工具提示div将显示在选择标记上.但是,当用户单击选择标记并显示选项时,它会与工具提示重叠.为select或options标记提供更高的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>

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

html css positioning z-index

San*_*aul

2017 05-15

17
推荐指数

1
解决办法

1万
查看次数