Position使用後のfooterの位置がくずれる

Positionを使用した後の段落(footer)が表示されるべき通常の場所(グレーのボックスの下）に表示されません。位置的にPositionが効いてしまっているような状態で表示されてしまいます。(グレーのボックスの中に表示されてしまいます）
通常の場所に表示させるにはどうしたらよいのでしょうか?初歩的な質問でしたらすみませんが、よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ

HTML

<!DOCTYPE html> <html lang="ja" dir="ltr"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <link rel="icon" type="image/png" href="Portfolioimage/y_flower.png" sizes="15px 15px"> <link rel="stylesheet" href="about.css"> <link rel="stylesheet" href="icomoon.css"> <title>abc</title> </head> <body> <header> <div class=top_title> <p>ABOUT</p> </div> </header> <content> <div class="main_pic"> <img src="Portfolioimage/main_pic.png"> </div> <div class="main_box"> <p>TEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXTTEXT</p> </content> <footer> <div class="abc-right">copyright abc</div> </footer>

CSS
body {
width: auto;
margin: 0;
font-family: Futura Lt BT;

}

.top_title p{
text-align: center;
color: grey;
padding-top: 2%;
border-bottom: 1px solid grey;
padding-bottom: 3px;
width: 4%;
margin: 0 auto;
display: block;

}

.main_pic img{
width: 60%;
height: 30%;
display: block;
margin: 0 auto;
margin-top: 3%;
position: relative;
z-index: 1;

}

.main_box {
width:40%;
height: 80%;
padding: 20px;
background-color: grey;
text-align: center;
color: white;
font-size: 10px;
z-index: 2;
position: absolute;
right: 28%;
top: 70%;