Question

我一直试图解决这个问题2天但没有成功，这让我感到疯狂。

基本上，当我点击输入并且菜单下拉时，它会与下面的下拉菜单重叠。我正在使用Wordpress ClickBoutique主题。

我试过给他们不同的z-index值，甚至用！important覆盖内联规则，但它似乎不起作用。似乎js（可能是jQuery）函数根据用户点击的下拉菜单更改了那些z-index值。

有人可以帮帮我吗？

Answer 1

你有z-index声明冲突，你需要删除下面注释的地方（styles.css中的第236和243行）

.site-content .jq-selectbox,
.widget .jq-selectbox {
    font: 16px 'Roboto Condensed';
    min-width: 180px;
    width: 100%;
    /* z-index: 98 !important; REMOVE */
}
.site-content .jq-selectbox,
.widget .jq-selectbox:first-child {
    font: 16px 'Roboto Condensed';
    min-width: 180px;
    width: 100%;
    /* z-index: 99 !important; REMOVE  */
}

添加以下内容，以便“顶部”下拉列表与“底部”下拉列表重叠。

#pa_color-styler{
   z-index:9999;
}

Answer 2

将这些z-index：98替换为style.css第243行中的类：

.site-content .jq-selectbox，.widget .jq-selectbox：first-child .site-content .jq-selectbox，.widget .jq-selectbox

Answer 3

1）.site-content .jq-selectbox, .widget .jq-selectbox:first-child

2）.site-content .jq-selectbox, .widget .jq-selectbox

您只需要从上面的类中删除z-index属性。它与您的其他类中的z-index属性冲突。

CSS Z-Index菜单下拉列表错误

3 个答案: