选择Chrome中相对定位元素后无法访问的元素

Question

我在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中，当您点击它时，选择无法获得焦点（但您可以选中它）。

如果将“bar”div的高度增加到100px，以便选择出现在100x100图像下方，则可以单击它。

这是预期的吗？Chrome表现正常，还是FF只是更宽容？

这是jsfiddle

Answer 1

您的div元素展开以与select元素重叠，请使用：

pointer-events: none;

在你的css中div反击它。

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

Answer 2

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

z-index：-1

上部div正在选择顶部扩展。这是意想不到的行为，但这是一个修复。

Answer 3

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

<强> jsFiddle example