Элементы, плавающие друг над другом, хотя они и являются блоками?

Question

Так что дизайн интерфейса не очень мой ...

Я пытаюсь, чтобы каждый пост/мой главный заголовок/логотип занимал 100% на 100%, который работает. Но я также пытаюсь установить определенные элементы в родительском элементе, что я и сделал, но когда сайт будет изменен, элементы, как правило, просто плавают поверх друг друга.

Есть ли способ, которым я могу это сделать, чтобы каждый элемент действовал как блок для предотвращения поплавка?

\t body { 
 
\t \t font-family: 'Raleway', sans-serif; 
 
\t } 
 

 
\t /* Article/Content */ 
 
\t div.article { 
 
\t \t height: 100%; 
 
\t \t width: 100%; 
 
\t \t display: flex; 
 
\t \t justify-content: center; 
 
\t \t align-items: center; 
 
\t \t position: relative; 
 
\t } 
 
\t div.article p { 
 
\t \t font-size: 100%; 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t } 
 
\t div.article div.datetime { 
 
\t \t font-family: 'Open Sans', sans-serif; 
 
\t \t position: absolute; 
 
\t \t top: 20px; 
 
\t \t left: 20px; 
 
\t \t display: inline-block; 
 
\t } 
 
\t .hookers { 
 
\t \t vertical-align: middle; 
 
\t  font-size: 700%; 
 
\t  color:#CFD8DC; 
 
\t  letter-spacing: -2px; 
 
\t  font-weight: bold; 
 
\t  text-shadow: 1px 1px #78909C,2px 2px #78909C,3px 3px #78909C,4px 4px #78909C,5px 5px #78909C,6px 6px #78909C,7px 7px #78909C,8px 8px #78909C,9px 9px #78909C,10px 10px #78909C; 
 
\t } 
 

 
\t /* Misc */ 
 
\t .noselect { 
 
\t \t -webkit-touch-callout: none; 
 
\t \t -webkit-user-select: none; 
 
\t \t -khtml-user-select: none; 
 
\t \t -moz-user-select: none; 
 
\t \t -ms-user-select: none; 
 
\t \t user-select: none; 
 
\t }

<link href='https://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'> 
 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
 
<div class="header article"> 
 
\t <span class="hookers noselect">WELCOME</span> 
 
</div> 
 

 
<div class="article"> 
 
\t \t <div class="datetime">Posted on <?= date('Y-m-d'); ?> at <?= time(); ?></div> 
 
\t \t <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
 
</div>

Answer 1

На div.article, установите его в position: absolute; Затем установите дочерние блоки position:relative;.

Наконец, расположите блок внутри div, используя верхний, нижний, левый и правый. Блоки будут располагаться относительно абсолютно позиционированного родительского контейнера.

CSS:

body { 
    font-family: 'Raleway', sans-serif; 
} 

/* Article/Content */ 
div.article { 
    height: 100%; 
    width: 100%; 
    display: flex; 
    justify-content: center; 
    position: absolute; 
} 
div.article p { 
    font-size: 100%; 
    font-family: 'Open Sans', sans-serif; 
} 
div.article, div.datetime { 
    font-family: 'Open Sans', sans-serif; 
    position: relative; 

    display: inline-block; 
} 
.hookers { 
    vertical-align: top; 
    height: 100%; 
    width: 100%; 
    display:block; 
    text-align: center; 
    font-size: 700%; 
    color:#CFD8DC; 
    letter-spacing: -2px; 
    font-weight: bold; 
    text-shadow: 1px 1px #78909C,2px 2px #78909C,3px 3px #78909C,4px 4px #78909C,5px 5px #78909C,6px 6px #78909C,7px 7px #78909C,8px 8px #78909C,9px 9px #78909C,10px 10px #78909C; 
} 

/* Misc */ 
.noselect { 
    -webkit-touch-callout: none; 
    -webkit-user-select: none; 
    -khtml-user-select: none; 
    -moz-user-select: none; 
    -ms-user-select: none; 
    user-select: none; 
} 

HTML

<link href='https://fonts.googleapis.com/css?family=Raleway:800' rel='stylesheet' type='text/css'> 
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'> 
<div class="header "> 
    <span class="hookers noselect">WELCOME</span> 
</div> 

<div class="article"> 
     <div class="datetime">Posted on <?= date('Y-m-d'); ?> at <?= time(); ?></div> 
     <p>The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men. Blessed is he who, in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother's keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy My brothers. And you will know My name is the Lord when I lay My vengeance upon thee.</p> 
</div> 

Fiddle