Question

我有一个绝对的位置,像一个工具。在变换一个元素时,它显示,然后在 mo中隐藏。我在网页上的<代码><select>要素被置于工具箱之上。通常情况下,工具四将出现在选定标的上。但是,当用户点击选定标签和显示选择时,该工具会重叠。给选择或选择标的以较高的z-指数并不奏效。

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

Answer 1

不适用<代码>z-index 如果没有<代码>,属性(绝对、相对、固定等)。

添加<条码>的位置: 字母至<条码>。从而继承<代码>z-index数值。

详情请见这一屏幕。

Answer 2

按照规格()

除背景物和颜色外,对选择要素适用风格的风格被忽略。

因此,z-index财产被忽略,而违约行为是显示文件上所有内容的下降。

Answer 3

这项工程(使用支架——应当叫作 mo余活动):

var $select = $("select").blur();
if ($.browser.webkit) {
  $select.hide();
  setTimeout(function() {
    $select.show()
  }, 5);
}

IE7-9和FF中的模糊似乎就足够了。Webkit没有尊重这一点(有人对此提出抗议),因此,解决办法似乎是迅速隐藏和展示选箱。

Answer 4

Try:

form, select, options{ z-index:10;}

也许,表格正给它带来超支。它应当与你一样工作,因为国际能源学会确实考虑到z-index。

Regards, -D

Answer 5

通过文字选择适用现行办法

友情链接