0

我试图在两个不同的部分放置两个加号。一个加号是绿色，另一个是黑色。绿色加号应显示在主页上（在底部中心位置；从底部向上 10px），黑色加号应显示在关于页面（也在底部中心位置；也是从底部向上 10px）。

但是两个加号都显示在主页的底部，并且它们“相互覆盖”。

它们是用 jquery 向下滚动到下一页的链接（我知道如何做这部分），但我不能让它们显示在不同的部分。

为什么两个标志都显示在同一部分？

这是 JSFiddle：http: //jsfiddle.net/5QDVs/42/

<section id="home">
        <div class="inner">
            <div class="copy">
                <h1 class="logoimage"></h1>
                <div id="button" class="center">
                    <a class="abouttriangle" href="#"></a>
                </div>
            </div>
        </div>
    </section>

<section id="about">
    <div class="inner">
        <div class="copy">
            <h1>About</h1>
            <p>Lorem Ipsum bla bla bla...</p>
            <div id="button2" class="center">
                <a class="servicestriangle" href="#"></a>
            </div>
        </div>
    </div>
</section>
4

4 回答 4

1

给你：http: //jsfiddle.net/W5q76/

由于您Position: absolute在中心类上设置了，它包含的父 div 必须有一个position: relavtive.

    .copy{
      display: inline-block;
      position: relative;
      vertical-align: middle;
      max-width: 85%;
      height:100%;
    }
于 2013-11-06T20:58:55.220 回答
0

你需要的部分是position: reliative. 您也有课程.aboutriangle，然后参考.abouttriangle

http://jsfiddle.net/5QDVs/44/

于 2013-11-06T20:55:57.213 回答
0

您的 CSS 类.center包含position: absolute并应用于这两个图标，导致元素位于页面上的相同位置。

于 2013-11-06T20:56:04.377 回答
0

现场演示

  1. 在你的 jsFiddle 中，你写aboutriangle而不是abouttriangle在你的 CSS 中。
  2. 您需要设置position:relative;为#home并且#about因为您在.center类中使用绝对定位，所以它将相对于其第一个定位（非静态）祖先元素定位。
  3. position:relative;如果您要创建更多应该导航到下一页的图标，请不要忘记添加到所有其他部分。
于 2013-11-06T20:56:31.763 回答