Question

我有一个非常简单的网页设置，包括div，header和i元素的网格：

我想要做的就是在这个网格后面添加一个背景颜色和标题的div，网格元素出现在新背景div的顶部。

然而，当我尝试这样做时，我明白了：

如您所见，背景div的透明颜色与按钮重叠，仅在网格中。

我确保调整所有元素的z-index（背景div，网格及其所有元素），以便它们具有比背景div更高的z-index值

这是我的HTML和CSS：

HTML

<html>
...
<body>
    <div id="sfa3features"><h1>New SFA3 Features!</h1></div>
    ...
    <div class="wrapper-how-to" id="grid-menu3">

        <div class="row-top"></div>
        <h2 class="row-top label-cell">Setting</h2>
        <div class="row-top"></div>
        <div class="row-top"></div>
        <div class="row-top"></div>
        <div class="row-top"></div>

        <i class="image-cell fa fa-info-circle fa-2x"></i>
        <h3 class="label-cell">Combo Items</h3>

        <div id="combo_items_finding"  class="box-how-to enabled"><h3>Finding</h3>   <span class="popup popup-how-to" id="popup_combo_items_finding" > </div>
        <div id="combo_items_updating" class="box-how-to impossible"><h3>Updating</h3>  <span class="popup popup-how-to" id="popup_combo_items_updating" ></div>
        <div id="combo_items_entering" class="box-how-to enabled"><h3>Entering</h3>  <span class="popup popup-how-to" id="popup_combo_items_entering" ></div>
        <div id="combo_items_linking"  class="box-how-to impossible"><h3>Linking</h3><span class="popup popup-how-to" id="popup_combo_items_linking"  ></div>

    </div>

    <div class="wrapper-how-to" id="grid-menu4">

        <div class="row-top"></div>
        <h2 class="row-top label-cell">Pickbox</h2>
        <div class="row-top"></div>
        <div class="row-top"></div>
        <div class="row-top"></div>
        <div class="row-top"></div>

        <i class="image-cell fa fa-folder-o fa-2x"></i>
        <h3 class="label-cell">Pickbox</h3>

        <div id="pickbox_finding"  class="box-how-to enabled"><h3>Finding</h3>   <span class="popup popup-how-to" id="popup_pickbox_finding" > </div>
        <div id="pickbox_updating" class="box-how-to enabled"><h3>Updating</h3>  <span class="popup popup-how-to" id="popup_pickbox_updating" ></div>
        <div id="pickbox_entering" class="box-how-to enabled"><h3>Entering</h3>  <span class="popup popup-how-to" id="popup_pickbox_entering" ></div>
        <div id="pickbox_linking"  class="box-how-to impossible"><h3>Linking</h3><span class="popup popup-how-to" id="popup_pickbox_linking"  ></div>

    </div>

...
</body>
</html>

CSS

.wrapper-how-to {

    display: grid;

    grid-gap: 10px;
    grid-template-columns: 5% 22% 16% 16% 16% 16%;

    background-color: transparent;
    color: #444;
    margin: 2.5% auto !important;
}

.wrapper-how-to h2,
.wrapper-how-to h3,
.wrapper-how-to div,
.wrapper-how-to i
{
    z-index:2;
}


#sfa3features{
    /*Should be the same as coverup5, but back layer*/

    display: flex;

    position: absolute;
    width: 105%;
    left:-4%;
    align-items: flex-start;
    justify-content: center;

    background-color: rgba(255, 219, 89,0.8);
    border-color: rgb(252, 204, 30);
    border-style: solid;
    border-radius: 8px;
    border-width: 5px;

    z-index: -1;

    height: 400px;
    top:1485px;
}

知道发生了什么事吗？

Answer 1

我感到困惑。 div元素具有透明色。当然他们也会使用背景div的颜色。

将CSS切换为不透明颜色可以解决问题。

Answer 2

有同样的问题，实际上是因为我使用的是透明颜色。

透明度对较低Z指数影响较高Z指数的因素

2 个答案: