发表新帖
发表新帖

How to select options overlapping an absolute positioned DIV?

前端 未结
关注
5 652
暖寄归人
暖寄归人 2021-02-04 04:46

I have an absolute positioned div which works like a tooltip. On mouse over of an element it shows and then hides at mouse out. I have few

提交评论
  •  加载中...
  • 半阙折子戏
    2021-02-04 05:29

    No element will apply the z-index value without also having a position attribute (absolute, relative, fixed, etc).

    Try adding position:relative to your select so that it inherits a z-index value.

    See this screencast for a more in depth explanation.

    0 讨论(0)
  • 陌清茗
    2021-02-04 05:31

    This works (using jquery - should be called on the mouseover event):

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

    blur seems to suffice in IE7-9 and FF. Webkit doesn't respect this (bugs are filed against this), so the solution seems to be to hide and show the select box quickly.

    0 讨论(0)
  • 盖世英雄少女心
    2021-02-04 05:41

    As per the specifications (http://docs.webplatform.org/wiki/html/elements/option)

    Except for background-color and color, style settings applied through the style object for the option element are ignored.

    And hence the z-index property is ignored and the default behavior is to show the drop down above all elements on the document.

    0 讨论(0)
  • 一整个雨季
    2021-02-04 05:41

    Try:

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

    Perhaps the form tag is giving it the overlay. It should work as you have it, as IE does take into account z-index.

    Regards, -D

    0 讨论(0)
    •  看不清?
    提交回复
    热议问题