Question

很快，这是我的问题：

有三个图像绝对位于固定位置的盒子中。我希望插图不要传递给我，但我已经尝试了很多东西（改变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; }

here's the live website

我没有太好地获得“堆叠顺序上下文”。从我得到的，如果父母有一个更大的z指数，它将比它的所有孩子更重要，但显然它不是那样。

Answer 1

您似乎只需要：

.content {background: white;}

......除非我遗漏了什么。

Answer 2

尝试使用一个白色div，其z-index高于包含文本的固定图片，而不仅仅是背景。或者，您可以尝试为固定图像提供负z-index。

堆叠顺序和位置固定

2 个答案: