Problème de div qui se chevauchent

Bonsoir à tous !

Je vous contacte car j'ai un problème que je n'arrive pas à résoudre malgré des heures de bricolage et des recherches infructueuses...
Je crée ma première page en HTML/CSS et je dois créer des blocs placés l'un en dessous de l'autre, avec sur chacun des blocs des sous-blocs qui les chevauchent (titre, texte, images...). Ça marche très bien pour les premiers blocs pour le 3ème (appelé sous-partie 2) ça foire complètement et il chevauche le bloc 2 : http://www.noelshack.com/2019-01-5-1546560631-ex1.png
Voici mon code en HTML :

		<!--=================== sous-partie 1 ===================-->
		<div class="sous-partie-1" style="width:100%">
			<div class="places">
				<img src="upload/pin.png" alt="icone places">
				<h4>PLACES</h4>
				<p>
					Seamlessly empower fully researched growth strategies and interoperable sources.
				</p>
			</div>

			<div class="settings">
				<img src="upload/settings.png" alt="icone settings">
				<h4>SETTINGS</h4>
				<p>
					Collaboratively administrate turnkey channels whereas virtual e-tailers an other media.
				</p>
			</div>

			<div class="easy">
				<img src="upload/easy.png" alt="icone easy">
				<h4>EASY</h4>
				<p>
					Interactively procrastinate high-payoff content without backward-compatible data.
				</p>
			</div>
				
			<div class="global">
				<img src="upload/saturn.png" alt="icone global">
				<h4>GLOBAL</h4>
				<p>
					Credibly innovate granular internal or "organic" sources whereas high standards in web-readiness
				</p>
			</div>
		</div>
		<br>

		<!--=================== sous-partie 2 ===================-->
		<div class="sous-partie2">
			<div class="sp2_titre">
				<h2>People talking about #MIMOStyle</h2>
			</div>
			<div class="sp2_texte">
				<p>Join our #MIMOStyle adventure. Meet up in London this saturday ! Spread the word and join for fun.</p>
			</div>
			<div class="spt_boutons">
				
			</div>
		</div>
		<br>

Et en CSS :

/*==================== sous-partie 1 ====================*/

.sous-partie-1
{
	position: relative;
	text-align: left;
	margin:5em 5px;
	height: auto;

}

.places
{
	position: absolute;
	border: 1px solid;
	top: 50%;
	left: 16px;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em
}

.settings
{
	position: absolute;
	top: 50%;
	left: 25%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
}

.easy
{
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
}

.global
{
	position: absolute;
	top: 50%;
	left: 75%;
	border: 1px solid;
	margin: 20px;
	padding: 5px;
	width: 230px;
	font-size: 1.3em;
	
}

/*==================== sous-partie 2 ====================*/

.sous-partie2
{
	position: relative;
	text-align: center;
	background-color: rgb(0, 172, 230);
	color: white;
	margin:50px 0px;
	height: auto;
}
.sp2_titre
{
	top: 50%;
}

.sp2_texte 
{
	top: 70%;
}

Voilà, je sais que les divs sont supposées allées à la lignes quand elles sont mises à la suite, et j'ai même mis des balises <br>, mais le chevauchement reste !
Côté CSS, j'ai mis aux blocs principaux une position: relative; et une position: absolute; aux sous-blocs qui vont se placer pardessus. Ça marche très bien pour l'entête et la sous-partie 1, je ne comprend pas pourquoi la sous-partie 2 se prend pour un sous-bloc de la sous-partie 1...

Bref, de l'aide me serait très utile à ce sujet ! Merci d'avance
Modifié par Yass-CLR (04 Jan 2019 - 01:38)

Bonjour,

C'est lequel le bloc 2 ?

Amicalement,

Bonjour,

Si l'on suppose que le bloc2 est l'ensemble "sous-partie 1", le problème provient du fait que le bloc principal de sous-partie 1 n'a pas de hauteur car il ne contient que des éléments en position absolute, qui sont donc sortis du flux et ne peuvent lui donner une hauteur.

Amicalement,

Bonjour,

Oui le bloc 2 est bien "sous-partie 1", le bloc 1 étant "en-tête".
Effectivement, j'ai pu régler mon problème est retirant les position absolute et en utilisant à la place la fonction "display : inline;" ou "display : block" pour mettre, en place mes éléments. Merci !