利用css屬性filter: blur()時，為什么設(shè)置z-index無法解決:after偽元素遮住主元素？

1.最近設(shè)計表單樣式的時候，希望表單的背景為毛玻璃樣式，于是利用filter:blur()來進行設(shè)置。
代碼結(jié)構(gòu)為：

<body id="index-bg">
  <section id="the-form">
      <div id="container">
          這是一些描述性的文字，用于測試blur效果
      </div>
  </section>
</body>

css樣式為：

#the-form{
    width: 600px;
    height: 300px;
    display: block;
    position: relative;
    top: 50%;
    left: 50%;
    margin-top: -150px;
    margin-left: -300px;
    border-radius: 10px;
    background: inherit;
    font-family: my-font;
    font-size: 30px;
}
#the-form > div {
    display: block;
    z-index: 10;
}
#the-form:after{
    content: "";
    /*此處指定的寬度與高度特定為模糊區(qū)域的大小*/
    width: 100%;
    height: 100%;

    position: absolute;/*偽元素使用絕對定位*/
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 5;
    /*在這種定位方式下，無需指定偽元素的大小*/
    background: inherit;
    -webkit-filter: blur(15px);
       -moz-filter: blur(15px);
            filter: blur(15px);
}

但是無論怎么設(shè)置z-index，偽元素始終在<div id="container">內(nèi)文字的上方：

這是怎么一回事呢？
還存在一個疑問：偽元素的width:100%不是不起作用么，為什么還能影響到這個毛玻璃的大小呢（即本身的大?。?br>在此謝過了！

回答

編輯回答

別瞎鬧

z-index對position為static的元素是不起作用的，所以你可以給#container加上{position: relative}。

2018年5月22日 14:31

編輯回答

尋仙

你的這代碼的問題有點多。。。話不多說，我先指出你的問題。

BUG1：為什么文字總是在下方

（1）#the-form:after改為#the-form:before，這點很重要。:before可用于在某個元素之前插入某些內(nèi)容; :after可用于在某個元素之后插入某些內(nèi)容;
（2）#the-form偽類里z-index：5;改為z-index: -1; 讓毛鏡在底部。

BUG2:我拷貝你的代碼，因為你沒有給出body和section背景設(shè)置，我自己加了一段css：

body {
    min-height: 100vh;
    box-sizing: border-box;
    margin: 0;
    padding-top: calc(50vh - 6em);
    font: 150%/1.6 Baskerville, Palatina,serif;
}
body, section::before {
    background: url("assets/images/banner_4.png") 0 / cover fixed;
}

但發(fā)現(xiàn)沒有毛玻璃效果，我發(fā)現(xiàn)你給#the-form和它的偽類都加了background: inherit;，導致不能出現(xiàn)，所以我刪了它，效果如下：

圖片描述

我不知道你這樣寫的理由，可能是我加的那段css樣式跟你不一樣導致的吧~