Live demo

Question

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

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

它们是用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>

Answer 1

在这里：http://jsfiddle.net/W5q76/

由于您在中心类上设置Position: absolute，因此包含父div的内容必须为position: relavtive。

    .copy{
      display: inline-block;
      position: relative;
      vertical-align: middle;
      max-width: 85%;
      height:100%;
    }

Answer 2

您需要这些部分为position: reliative。您还有课程.aboutriangle，然后参考.abouttriangle

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

Answer 3

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

Answer 4

Live demo

在你的jsFiddle中，你在CSS中写了aboutriangle而不是abouttriangle。
您需要将position:relative;设置为#home和#about，因为您在.center类中使用绝对定位，该定位将相对于其第一个定位（不是静态的）祖先元素。
如果您要创建更多应导航到下一页的图标，请不要忘记将position:relative;添加到其他每个部分。

CSS定位在不同的部分

4 个答案:

Live demo