简体繁体 English

在Chrome中选择框位置问题

[英]Select box position issues in chrome

原文 2017-08-21 13:35:23 9 1 javascript/ css/ google-chrome/ select/ drop-down-menu

I have an issue with select box in Chrome. 我在Chrome中的选择框有问题。 I have three select boxes, where the value of the second select box depends on the first and the value of the third depends on the second. 我有三个选择框，其中第二个选择框的值取决于第一个，而第三个选择框的值取决于第二个。

I have shown an error <div> when there is no option in the select box and the user tries to open it. 当选择框中没有选项并且用户尝试将其打开时，我显示了错误<div> 。 The error <div> comes at the top of the three <div> s and disappears when the user clicks on any portion of the body. 错误<div>位于三个<div>的顶部，并且在用户单击正文的任何部分时消失。

显示的错误信息

My issue is that the option list detaches from the select box when run in Chrome, as the error <div> hides on clicking the select box (which is also part of the body). 我的问题是，在Chrome中运行时，选项列表会与选择框分离，因为单击选择框（这也是正文的一部分）时会隐藏错误<div> 。

选择选项已分离。

1 个解决方案

You can try position:absolute; 您可以尝试position:absolute; on the error element and use eg top:-40px;left:0; 在错误元素上，并使用例如top:-40px;left:0; to push it up. 推高它。 Remember that the element surrounding the error code need position:relative; 请记住，错误代码周围的元素需要position:relative; (to define the "zero-position" of the absolute element). （定义绝对元素的“零位置”）。 The surrounding element (with position:relative; ) must not be one of the "disappearing" elements. 周围的元素（具有position:relative; ）不能是“消失的”元素之一。

The error code will be shown on top of some other stuff. 错误代码将显示在其他内容的顶部。 With the top:value you can place it where it is most suited. 使用top：value可以将其放置在最合适的位置。