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，因为它的背景是透明的。为article提供背景色background: #FFF

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

JSFiddle Version

Answer 2

我刚才回答了类似的问题。这是我放在一起的代码的演示

DEMO http://jsfiddle.net/DVWF8/1/

background: #fff;
border: 1px solid #211C18;
box-shadow: 2px 4px 20px #005377;
-moz-box-shadow: 2px 4px 20px #005377;
-webkit-box-shadow: 2px 4px 20px #005377;

防止框阴影显示在另一个元素的顶部

2 个答案: