estoy haciendo una pagina web como practica, ya una parte pero quiero continuar con las siguientes partes pero no comprendo porque la proxima sección se me posiciona sobre la foto en vez seguir abajo para poder continuar maquetando, adjunto una foto como tendría que seguir.
*{
margin: 0px;
padding: 0px;
}
body{
width: 1150px;
margin: auto;
font-family: "Montserrat", sans-serif;
}
/*Encabezado*/
header{
display: flex;
justify-content: space-between;
padding: 20px;
border: 1px solid #000;
}
/*Logo Principal*/
.logo{
padding: 0 75px;
}
nav{
padding: 0 75px;
}
nav a{
text-decoration: none;
padding: 0 15px;
font-size: 15px;
font-weight: bold;
}
.black{
color: #2A3037;
}
.opacity{
color: #CBD0D3;
}
/*Imagen de portada principal*/
.principal-cover img{
position: absolute;
width: 1150px;
height: 600px;
z-index: 1;
}
/*Icono texto america del sur*/
.logo-map img{
position: absolute;
width: 20px;
height: 30px;
z-index: 2;
margin-top: 200px;
margin-left: 120px;
}
/*Texto America del Sur*/
.text-image{
position: absolute;
z-index: 2;
color: white;
text-align: center;
margin-top: 200px;
margin-left: 160px;
font-size: 40px;
}
/*Texto debajo del h1 america del sur*/
.subtitle{
position: absolute;
z-index: 2;
color: white;
margin-top: 270px;
margin-left: 120px;
border-top: 2px solid #fff;
padding-top: 20px;
font-weight: bold;
width:420px;
}
/*Descripción america del sur*/
.subtitle-description{
position: absolute;
z-index: 2;
color: white;
margin-top: 330px;
margin-left: 120px;
font-size: 12px;
font-weight: bold;
}
/*Recuadro con información del destino*/
.rectangle-info{
position: absolute;
z-index: 2;
margin-top: 400px;
margin-left: 800px;
background-color: #2A3037;
height: 140px;
width: 220px;
opacity: 0.6;
border: 2px dashed #fff;
}
/*Logo recuadro con información del destino*/
.logo-text .arrow-icon{
position: absolute;
width: 10px;
height: 10px;
z-index: 2;
padding-left: 200px;
padding-top: 23px;
}
/*icono flecha*/
.arrow-icon{
position: absolute;
width: 10px;
height: 10px;
z-index: 3;
}
.text-red{
color:#FA6980;
padding-top: 20px;
font-size: 14px;
font-weight: bold;
text-align: center;
padding-top: 20px;
}
.text-white{
color:#fff;
font-weight: bold;
padding-right: 30px;
font-size: 13px;
text-align: center;
padding-top: 5px;
}
.text-description{
color: white;
font-size: 12px;
text-align: center;
padding-top: 5px;
font-weight: bold;
}
.p-section{
position: relative;
z-index: 3;
}
<!DOCTYPE html>
<html>
<head>
<title>Ejercicio Aenima</title>
<link rel="stylesheet" href="css/styles.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<img class="logo" src="logo/logo_01.svg" alt="Logo">
<nav class="nav-bar">
<a class="nav-link black" href="#">HOME</a>
<a class="nav-link opacity" href="#">TENDENCIAS</a>
<a class="nav-link opacity" href="#">BLOG</a>
</nav>
</header>
<div class="principal-cover">
<img src="img/Viajes_Hero.jpg" alt="cover">
<div class="logo-map">
<img src="iconos/ic_pin.svg" alt="mapa">
</div>
<h1 class="text-image">AMERICA DEL SUR</h1>
<h3 class="subtitle">Lugares maravillosos por America del Sur</h3>
<p class="subtitle-description">Estos son algunos lugares que elijen la mayoría de los turistas que<br>visitan America del Sur</p>
<div class="rectangle-info">
<div class="logo-text">
<img class="arrow-icon" src="iconos/arrow.svg" alt="logo">
</div>
<p class="text-red">PRÓXIMA AVENTURA</p>
<p class="text-white">Europa Meridional</p>
<p class="text-description">Forman parte veinte países <br>ej.España,Francia,etc.</p>
</div>
</div>
<div class="p-section">
<h2>TENDENCIAS</h2>
<div>
<div class="tendencies">
<img src="" alt="">
<h5></h5>
<p></p>
</div>
<div class="tendencies">
<img src="" alt="">
<h5></h5>
<p></p>
</div>
<div class="tendencies">
<img src="" alt="">
<h5></h5>
<p></p>
</div>
</div>
</div>
</body>
</html>