很快，这是我的问题：
三个图像绝对定位在一个位置固定的框中。我希望插图不要放在首位，但我已经尝试了很多东西（更改 z-index，删除它们..）
但它没有用。
<section class="home">
<container>
<div class="center-homepage">
<img src="img/home-mascot.svg" alt="" class="mascot">
<img src="img/home-scribble.svg" alt="" class="scribble">
<img src="img/home-circles.svg" alt="" class="circles">
</div>
</container>
</section>
<section class="content">
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, quisquam, excepturi, debitis, accusamus harum consequatur expedita consequuntur pariatur quae autem unde molestiae laboriosam repudiandae iste illum quasi possimus placeat reiciendis?
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Unde, et, totam, magni, fugiat nesciunt qui quas tempore atque consequuntur ad neque eum ex modi beatae error necessitatibus officia fuga odio.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem, voluptatibus, itaque sed saepe exercitationem atque voluptas! Similique, temporibus, fugit, tempora, voluptate culpa asperiores eligendi quibusdam explicabo repellendus esse quasi earum?</p>
</div>
</section>
.home {
height: 576px;
width: 100%;
position: relative;
background: url(' (a lot of data URI) ') no-repeat center 32px, #8b737a;
background-attachment: fixed; }
.center-homepage {
width: 500px;
margin-left: -250px;
height: 400px;
top: 90px;
position: fixed;
left: 50%;
z-index: 1; }
和CSS：
.mascot, .circles, .scribble {
position: absolute; }
.mascot {
width: 190px;
left: 50%;
margin-left: -95px;
top: 60px;
z-index: 5; }
.circles {
width: 230px;
left: 50%;
margin-left: -123px;
top: 20px;
z-index: 0; }
.scribble {
width: 400px;
top: 160px;
left: 50%;
margin-left: -200px;
z-index: 3; }
.content {
z-index: 100;
position: relative; }
我不太了解“堆叠顺序上下文”。据我所知，如果父级的 z-index 更大，它将比所有子级更重要，但显然并非如此。