我不知道这段代码有什么问题

Question

This code gives me: image of broken layout I just want the p tag class .mailtext to be inside the footer and not outside as it does.

I don't know if this counts as you doing my homework but this is driving me crazy the last two days. The first p tag (the copyright text) works perfectly, but the second one is not. I have tried a lot of different solutions. I have come up with solutions such as changing the overflow , z-index , making div container bigger, but nothing worked. I am a student and not experienced. Any ideas?

 .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 has a large margin-top on it. This makes it start near the bottom of the footer.

The paragraph after it, appears after it, below the footer (and off the screen).

You need to leave enough space (whether by increasing the height of the footer, using a minimum instead of fixed height, using a smaller margin on the paragraph, or some other means) for your content to appear in.