このコードで何が問題なのかわかりません

Question

このコードは私に与えます：image of broken layout ちょうどpタグクラス.mailtextがフッタの内側にあり、外側にはありません。

私が宿題をしている間にこれが重要かどうか分かりませんが、これが最後の2日間私を狂わせてしまいます。最初のpタグ（著作権テキスト）は完全に機能しますが、2番目のタグは完全ではありません。私はいろいろなソリューションを試しました。私はoverflow、z-indexを変更してdivコンテナを大きくするなどの解決策を思いついたが、何も働かなかった。私は学生で経験はありません。何か案は？

.footer { 
 
    /* more info footer */ 
 
    height: 200px; 
 
    background-color: black; 
 
    margin-top: 80px; 
 
    position: absolute; 
 
    right: 0; 
 
    left: 0; 
 
    overflow: hidden; 
 
} 
 
.rights { 
 
    /* copyright paragraph */ 
 
    text-align: center; 
 
    color: white; 
 
    margin-top: 170px; 
 
} 
 
.mail { 
 
    /* mail icon properties */ 
 
    position: relative; 
 
    bottom: 140px; 
 
    left: 377px; 
 
} 
 
.mailtext { 
 
    /* my email text properties */ 
 
    position: relative; 
 
    color: red; 
 
} 
 
.feedback { 
 
    /* feedback icon properties */ 
 
    position: relative; 
 
    bottom: 190px; 
 
    left: 430px; 
 
}

<footer class="footer"> 
 
    <div class="moreinfo"> 
 
    <!-- more info footer --> 
 
    <p class="rights">&#169;2017 annu.com. All rights reserved.</p> 
 
    <!-- copyright symbol --> 
 
    <a target="_blank" href=""> 
 
     <img class="feedback" src=""> 
 
    </a> 
 
    <!-- feedback logo --> 
 
    <img class="mail" src=""> 
 
    <!-- mail logo --> 
 
    <p class="mailtext">aaaaaa@gmail.com</p> 
 
    </div> 
 
</footer> 
 
<!-- /Footer -->

Answer 1

.rightsその上に大きなmargin-topを持っています。これにより、フッターの下部付近から開始されます。

その後の段落が、フッターの下（画面外）に表示されます。あなたがに表示されるコンテンツのために（段落の小さなマージン、またはいくつかの他の手段を使用して、代わりに一定の高さの最小値を使用して、フッターの高さを増大させることによってかどうかを）十分なスペースを残しておく必要があり

。