0

很快，这是我的问题：

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

三个图像绝对定位在一个位置固定的框中。我希望插图不要放在首位，但我已经尝试了很多东西（更改 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 更大，它将比所有子级更重要，但显然并非如此。

4

2 回答 2

1

看来您只需要：

.content {background: white;}

...除非我错过了什么。

于 2013-05-26T02:44:54.947 回答
0

尝试在包含文本的固定图片上方有一个 z-index 的白色 div，而不仅仅是背景。或者，您可以尝试为固定图像赋予负 z-index。

于 2013-05-26T02:27:44.690 回答