Создание страницы параллакса и элементов позиционирования в разделах

Question

В настоящее время я создаю страницу параллакса, но у меня проблемы с позиционированием элементов на разделах. Следовательно, моя проблема - это абсолютное позиционирование.

Есть ли способ сделать абсолютное положение для работы внутри раздела, а не для всей страницы/окна просмотра?

Я сделал очень минимальный пример того, что я пытаюсь сделать: https://jsfiddle.net/zu2epxxq/1/

Как вы можете видеть в этом пункте в #second секции должно находиться внутри этого раздела, а не в основной раздел #first. Очевидно, что это побочный эффект использования абсолютного позиционирования. Как я могу решить эту проблему чистым и хорошим образом?

HTML:

<section id="first"> 
    <div> 
    <p>This is a test</p> 
    </div> 
</section> 
<section id="second"> 
    <div> 
    <p>More text that has to be pushed arund in this section</p> 
    </div> 
</section> 

CSS:

html, 
body { 
    height: 100%; 
    color: #fff; 
    font-size: 16px; 
    margin: 0; 
    padding: 0; 
} 

section { 
    min-height: 100%; 
} 

#first { 
    background-color: #000; 
} 

#second { 
    background-color: #ddd; 
} 

section > div { 
    bottom: 0; 
    margin: 0; 
    font-size: 4em; 
    position: absolute; 
    transform: translate(-50%, 50%); 
    left: 50%; 
} 

Answer 1

Использование "позиция: относительная;" по разделам. Затем вы можете расположить дочерние элементы относительно элементов раздела.

Я сделал это из него: https://jsfiddle.net/hpepwvdg/1/

Но я предпочитаю использовать режим разметки Flexbox, так как я обнаружил власть Flexbox: (http://www.w3schools.com/css/css3_flexbox.asp):

html, body, .container { 
 
    height: 100%; 
 
     color: #fff; 
 
} 
 
.container { 
 
    display: -webkit-flexbox; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-align: center; 
 
    -ms-flex-align: center; 
 
    -webkit-align-items: center; 
 
    align-items: center; 
 
    justify-content: center; 
 
} 
 

 
#first { 
 
    background-color: #000; 
 
} 
 

 
#second { 
 
    background-color: #ddd; 
 
} 
 

 
.centered_heading { 
 
    font-size: 4em; 
 
}

<section class="container" id="first"> 
 
    <h1 class="centered_heading">Centered!</h1> 
 
</section> 
 

 
<section class="container" id="second"> 
 
    <h1 class="centered_heading">Centered!</h1> 
 
</section>