Позиционирование CSS в разных разделах

Question

Я пытаюсь позиционировать два плюсовых знака в двух разных разделах. Один знак плюса - зеленый, другой черный. Значок «Зеленый плюс» должен отображаться на домашней странице (в нижнем центре, 10 пикселей вверх), а знак «черный плюс» должен появляться на странице «О программе» (в нижнем центральном положении, а также на 10 пикселей вверх).

Но оба плюсовых знака показывают внизу страницы «Главная», и они «покрывают друг друга».

Они предназначены для ссылок на прокрутку вниз до следующей страницы с помощью 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

Вам нужны разделы быть position: reliative. У вас также есть класс .aboutriangle, а затем ссылаться на .abouttriangle

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

Answer 2

Вашего класса CSS .center содержит position: absolute и применяется к обеим иконкам, в результате чего элементы должны быть расположены в том же месте на странице.

Answer 3

Live demo

1. В вашем jsFiddle, Вы писали aboutriangle вместо abouttriangle в вашем CSS.
2. Вам нужно установить position:relative; в #home и #about, потому что вы используете абсолютное позиционирование вашего .center класса, который будет расположен относительно его первого расположенной (не статический) предком элемента.
3. Не забудьте добавить position:relative; в любой другой раздел, если вы создадите больше значков, которые должны перейти на следующую страницу.

Answer 4

Здесь вы идете: http://jsfiddle.net/W5q76/

Так как вы установите Position: absolute на центр класса Это содержащий родительский DIV должен иметь position: relavtive.

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