z-index - 防止框阴影显示在另一个元素之上

Question

我一直在尝试制作一个部分和一篇文章，以便使用框阴影使文章看起来位于该部分的顶部。问题是部分的模糊也扩散到文章上(当我只想要文章的框阴影扩散到部分上时)。我一直在尝试使用 z-index 将文章定位在高于该部分的位置，正如我在许多其他已回答问题中看到的那样，但似乎没有任何效果，而且我无法终生找出原因。我想避免使用白框阴影方法，因为它很可能会影响文章中的任何内容，但任何有效的方法都会很棒。这是一个JSFiddle玩。帮助将是非常有义务的。谢谢。

基本的 HTML 设置:

<article>article<br />article<br />article<br />article<br />I dont want the box shadow of the section overlapping this box here \/</article>
<section>section<br />section<br />section<br />section<br />section<br />section<br />section<br />section<br />section</section>

CSS:

article {
    position: relative;
    z-index: 0;
    width: 600px;
    margin: 100px auto 0;
    padding: 20px;
    border: orange 1px solid;
    box-shadow: 0 0 100px 1px orange;
}

section {
    position: relative;
    z-index: -1;
    width: 400px;
    margin: 0 auto;
    padding: 20px;
    border: orange 1px solid;
    box-shadow: 0 0 100px 1px orange;
    border-top: none;
}

Answer 1

z-index 只会对定位元素产生影响。给 article 和 section 一个位置position: relative。

通过您的文章 思想，您仍然会看到box-shadow，因为它的背景是透明的。给 article 一个背景色 background: #FFF

article {
  width: 600px;
  border: orange 1px solid;
  box-shadow: 0 0 100px 1px orange;
  padding: 20px;
  margin: 100px auto 0;
  z-index: 0;
  position: relative;
  background: #FFF;
}

section {
  width: 400px;
  border: orange 1px solid;
  box-shadow: 0 0 100px 1px orange;
  border-top: none;
  padding: 20px;
  margin: 0 auto;
  z-index: -1;
  position: relative;
}

<article>article<br />article<br />article<br />article<br />I dont want the box shadow of the section overlapping this box here \/</article>
<section>section<br />section<br />section<br />section<br />section<br />section<br />section<br />section<br />section</section>

JSFiddle Version