【css 層級(jí)】設(shè)置灰色塊的z-index:-1,但并沒有有效？

問題：希望實(shí)現(xiàn)灰色塊在下面
截圖：

代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Title</title>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        list-style: none;
    }
    a{
        text-decoration: none;
        color: #333333;
    }
    .menu{
        width: 400px;
        height: 400px;
        position: relative;
        text-align: center;
        background-color: antiquewhite;
        z-index: 0;
    }
    .menu>.fir_menu{
        height: 50px;
        width: 300px;
        border-radius: 25px 0 0 25px;
        background-color: orange;
        border: 1px solid red;
        position: absolute;
        right: 0;
        top: 300px;
        z-index: 1;
    }
    .menu>.fir_menu>li{
        position: relative;
        z-index:1;
    }
    .menu>.fir_menu>li>a{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: 1px solid red;
        border-radius: 20px;
        background-color: lightcoral;
        display: block;
        margin-left: 20px;
        margin-top: 5px;
    }
    .menu>.fir_menu>li>.sec_menu{
        height: 50px;
        width: 180px;
        border-radius: 25px;
        border: 1px solid grey;
        position: absolute;
        left: 50px;
        top: -80px;
        z-index: 1;
    }
    .menu>.fir_menu>li>.sec_menu::before{
        content: '';
        width: 150px;
        height: 50px;
        background-color: grey;
        border: 1px solid grey;
        border-radius: 25px;
        position: absolute;
        left: -80px;
        top:25px;
        transform: rotate(-60deg);
        z-index: -10;
    }
    .menu>.fir_menu>li>.sec_menu>li{
        float: left;
        position: relative;
        z-index:1;
    }
    .menu>.fir_menu>li>.sec_menu>li>a{
        width: 40px;
        height: 40px;
        line-height: 40px;
        border: 1px solid grey;
        border-radius: 20px;
        background-color: lightgray;
        margin: 4px;
        display: block;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu{
        height: 50px;
        width: 50px;
        border-radius: 25px;
        background-color: orange;
        position: absolute;
        left: 50px;
        top: -80px;
        z-index: 1;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu::before{
        content:'';
        width: 150px;
        height: 50px;
        background-color: grey;
        border: 1px solid grey;
        border-radius: 25px;
        position: absolute;
        left: 0px;
        top:28px;
        transform: rotate(30deg);
        z-index: -1;
    }
    .menu>.fir_menu>li>.sec_menu>li>.thi_menu>li>a{
        height: 40px;
        width: 40px;
        border-radius: 20px;
        background-color: lightcoral;
        line-height: 40px;
        display: block;
        margin: 5px;
    }
</style>

</head>
<body>

<div class="menu">
        <ul class="fir_menu">
            <li><a>點(diǎn)</a>
                <div></div>
                <ul class="sec_menu">
                    <li>
                        <a href="#">1</a>
                        <ul class="thi_menu"><li><a>我</a></li></ul>
                    </li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                </ul>
            </li>
        </ul>
</div>

</body>
</html>

回答

編輯回答

款爺

不是很清楚你想要的效果到底是怎樣的.

如果右上角你想要這種效果的話.

你只需要將 z-index:1 從 .menu>.fir_menu>li>.sec_menu>li>.thi_menu 移除即可.

.menu>.fir_menu>li>.sec_menu>li>.thi_menu {
  height: 50px;
  width: 50px;
  border-radius: 25px;
  background-color: orange;
  position: absolute;
  left: 50px;
  top: -80px;
  /* z-index: 1; 不要設(shè)置這個(gè)! */
}

移除 z-index 之后父元素就和子元素處于同一 stack context 了. 此時(shí)為子元素設(shè)置較小的 z-index 即可使其低于其父元素顯示.

至于左下角. 我猜你是想要這種效果

那只需要這么做即可:

.menu>.fir_menu>li>a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border: 1px solid red;
  border-radius: 20px;
  background-color: lightcoral;
  display: block;
  margin-left: 20px;
  margin-top: 5px;
  /* 調(diào)整層級(jí) */
  position: relative;
  z-index: 2;
}

2018年2月25日 04:10

編輯回答

冷眸

你的z-index再怎么小，也會(huì)在背景色之上。所以如果想要灰色在最底下，那灰色節(jié)點(diǎn)的父親節(jié)點(diǎn)肯定不能設(shè)置背景色，對(duì)應(yīng)的背景色可以放到after里面（灰色節(jié)點(diǎn)可以是before節(jié)點(diǎn)）

2017年12月24日 17:32

編輯回答

兔囡囡

想要的效果如圖所示：

我開始思路是要用z_index解決覆蓋的問題，但沒有試驗(yàn)成功。后來(lái)改一下HTML結(jié)構(gòu)，將灰色塊放在前面也能實(shí)現(xiàn)想要的效果。謝謝各位認(rèn)真的回答，第一次用這個(gè)，這么多好心人來(lái)回答，好感動(dòng)欸，為各位點(diǎn)贊。

2017年5月8日 12:48

編輯回答

維她命

設(shè)置 z-index 會(huì)創(chuàng)建層疊上下文, 你只有去掉父容器的 z-index, 則所有容器在同一個(gè)層疊之下, 不過有定位屬性的元素( position:relative/absolute/fixed)不管 z-index 如何設(shè)置都會(huì)在父容器背景和border之上
所以修改一下 css 能達(dá)到如下效果

但中間的li 的邊框無(wú)法在上面, 需另想辦法實(shí)現(xiàn)灰色置底

2017年5月27日 21:36

編輯回答