在 Chrome 中相对定位的元素后选择不可访问的元素答案

【问题标题】：Select element inaccessible after relatively positioned element in Chrome在 Chrome 中相对定位的元素后选择不可访问的元素
【发布时间】：2012-09-14 16:37:23
【问题描述】：

我在 Chrome (v21.0.1180.89) 中看到了奇怪的行为，但它在 FireFox 中运行良好。这是 HTML：

<div style="position:relative;text-align:right;width:500px;height:100px;">
    <img src="http://placehold.it/500x100"></img>
    <img src="http://placehold.it/100x100"></img>
    <div>foo</div>
</div>
<div style="height:50px;">bar</div>
<select>
    <option value="1">One xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

仅在 Chrome 中，当您单击它时选择无法获得焦点（但您可以通过 Tab 选择它）。

如果你将'bar' div的高度增加到100px，这样选择就会出现在100x100的图片下方，那么你就可以点击它了。

这是预期的，Chrome 的行为正确，还是 FF 只是更宽容？

这是jsfiddle

【问题讨论】：

标签： html css firefox google-chrome cross-browser

【解决方案1】：

http://jsfiddle.net/xjuae/2/

z-index：-1

上方的 div 在选择的顶部展开。这是意外行为，但这里有一个修复方法。

【讨论】：

不幸的是，真正的页面在那个 div 中有很多其他的东西，所以我必须定位它们并适当地 z 堆叠它们。可行，但很痛苦。如果我绝对将图像定位在 div 中，它不会使其扩展：jsfiddle.net/awilliams47/xjuae/6
我最终在 div 中的 img 上使用了position:absolute。虽然我没有使用您的解决方案，但您确实回答了我关于浏览器行为的问题并让我沿着正确的路径思考，所以我接受了您的回答。谢谢！

【解决方案2】：

您的div 元素扩展为与select 元素重叠，使用：

pointer-events: none;

在您的 css 中使用 div 来抵消它。

JSFiddle：http://jsfiddle.net/xjuae/3/

【讨论】：

不幸的是，真实页面在该 div 中有大量可点击的东西，所以这并不容易。我也不确定这是否是 IE 中的问题，我不相信它支持 pointer-events。

【解决方案3】：

如果您删除顶部 div 上的 position:relative，一切都很好。

jsFiddle example

【讨论】：

是的，但我需要它用于实际布局。小提琴是缩写代码。