Positionnement de div

**SP506** · 02/02/2026, 18h42

Bonjour.
Je cherche à realiser ce qui correspond à cette image, le chevauchement :
Nom : 00Screenshot_5.png
Affichages : 76
Taille : 32,3 Ko

Mon pb est le chevauchement de la partie centrale sur la partie supperieure.
Actuellement je triche avec une div fixed top qui contient le logo, une div qui contient l espace vide au centre pour simuler la superposition et en dessous une div centrale qui passe sous les autres et fait 100% de hauteur.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body class="w3-light-grey">
    <div class="w3-top w3-theme">
      <div class="w1450 header-content w3-padding" style="height: 80px">
        <img src="assets/images/blue_logo.png" alt="Logo" style="width: 50px" />
        <a href="#" class="w3-button w3-primary w3-right">Button</a>
        <br />
      </div>
      <div class="w1450 w3-white w3-hide-small" style="height: 50px"></div>
    </div>
 
    <div class="w1450 w3-white h100" style="padding-top: 150px">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil vel veniam
      totam voluptas eligendi ad ut eius assumenda libero, sit iure quasi maxime
      est quaerat consequuntur atque non. Sint, ab.
    </div>
  </body>

l un de vous pourrait il m indiquer comment faire ça proprement. Je précise que je voudrais que la partie centrale soit l équivalent d un height 100%, en butée en bas et qu au scroll, tout scrool sauf la partie fixed top bien sur...
Merci pour votre aide

**NoSmoking** · 03/02/2026, 19h15

Bonjour,
je n'ai pas tout bien compris mais ce qui nous aiderait vraiment c'est d'avoir le CSS appliqué à ton exemple.

**Declique69** · 04/02/2026, 14h30

J'obtiens quelque chose qui ressemble à ce que tu veux avec ce code.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
#haut {
   height:100px; 
   background:blue;
}
#centre {
   position:fixed; 
   top:50px; left:10%; 
   width:80%; 
   scroll-y:auto; 
   border-radius:25px; 
   background:white; 
   padding:20px;
}

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<body>
	<div id="haut">
	</div>
	<div id="centre">
		<P>Sdcqsmfkfdq mdslkfj qmlsdkjf qmlksdjf mqlkjsd mlfjq dsmlfkjqmsdlkjf qmlsdkjf ...</p>
	</div>
</body>

Positionnement de div

Positionnement en CSS

Discussions similaires

Partager

Partager