CSS3 DropShadow On Pages

Question

我试图在网站的每个部分/页面下面创建一个阴影，但我在这样做时遇到了问题。

站点演示：http://www.sfu.ca/~jca41/stuph/test/parallax01/parallax01.html

HTML：

<section id="first" class="page shadow">        
  <article>first page</article> </section>
<section id="second" class="page shadow">
  <article>second page</article> </section>
<section id="third" class="page shadow">        
  <article>third page</article> </section>  
<section id="fourth" class="page shadow">
  <article>fourth page</article> </section>

CSS：

.page { height: 1000px; }
.shadow {
    -moz-box-shadow: 0 10px 10px #000;
    -webkit-box-shadow: 0 10px 10px #000;
    box-shadow: 0 10px 10px #000;
}
#first { background: url(img/01.png) no-repeat fixed; }
#second { background: url(img/02.jpg) no-repeat fixed; }
#third { background: url(img/03.jpg) no-repeat fixed; }
#fourth { background: url(img/04.jpg) no-repeat fixed; }

Answer 1

添加position:相对于您的页面类，然后将z-index添加到每个部分，以便顶部的z-index比下面的更大。