html - 重ねる順番と位置は固定

Question

まもなく、ここに私の問題があります：

f http://d.pr/i/Kge6+

位置が固定されているボックスに絶対に配置された 3 つの画像があります。イラストが上を通らないようにしたいのですが、たくさんのことを試しました（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 が大きい場合、それはすべての子よりも重要になりますが、明らかにそうではありません。