Question

在我的第一页site上，我将两张图片放在一起，看起来就像是夕阳。我想让我的标志在它们之间徘徊，好像它是太阳一样，但我不能让它发生。该徽标目前位于该网站的第二页继承人我的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

你需要从它的父元素#logo中取出#intro div并给它一个比它的两个兄弟都大的z索引 - 然后包装所有的header元素到#intro-wrapper div。此外，我会position使用#logo代替position: absolute，而不是relative，这样可以更精细地控制它的位置，而不会影响文档的流量。周围的元素。

此外，您似乎有parallaxScroll函数更新top的{{1}}属性，这会阻止元素放在两个图像之间。

#logo

在另外两张图像之间制作1张图像？

1 个答案: