position - 使 1 张图像介于其他两张图像之间？

Question

在我的网站首页上，我有两张图片放在一起，所以看起来像日落。我想让我的标志像太阳一样在它们之间下降，但我无法做到这一点。该徽标目前位于该网站的第二页，这是 html：

<div id="intro">
     <div id="introbaggrundbagved"></div>
     <a name="section1" class="section">SECTION 1</a>
     <div id="logo">
     </div>
</div> <!--#intro-->

和CSS：

#intro{
  background: url('images/introforan.png') no-repeat center;
  height: 900px;
  margin: 0;
  position: relative;
  z-index: 3;
}

#introbaggrundbagved{
    background: url('images/introbagved.png') no-repeat center;
    height: 900px;
    width: 1440;
    margin:0;   
    position: relative;
}

#logo{
    background: transparent url('images/logo.png') no-repeat center;
    width: 600px;
    height: 600px;
    position: relative;
    margin-left: 420px;
    margin-top: 100px;
    z-index: 2;
}

Answer 1

您需要将#logodiv 从其父元素中取出，#intro并为其提供一个大于其两个兄弟元素的 z-index——然后将所有header元素包装到一个#intro-wrapperdiv 中。此外，我将使用, 而不是position的#logo元素，这将使您对其位置进行更精细的控制，而不会干扰周围元素的文档流。position: absoluterelative

此外，您似乎具有parallaxScroll更新 的top属性的功能#logo，这将防止将元素放置在您的两个图像之间。

    function parallaxScroll(){
      var scrolledY = $(window).scrollTop();
      $('#logo').css('top','+'+((scrolledY*.376))+'px');
        ....
      }