Chevauchement de 'div'

**Jmimi** · 04/01/2024, 06h55

Bonjour, et bonne année à tous,

Petite question de débutant, merci pour votre indulgence.

Quelqu'un peut-il m'expliquer pourquoi les 2 div s'affichent un peu décalés et non pas superposés dans le code HTML+CSS ci-dessous ?

Merci d'avance.
Jm

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!DOCTYPE html>
 
<html>
 
<!-- HEAD -->	
<head>
	<title>Positionnement Relative - Absolute</title>
	<meta charset="utf-8">
</head>
 
 
<!-- HTML -->
<body>
 
	<div class="absolute">Position absolute</div>
 
	<div class="relative">Position relative</div>		
 
</body>
 
 
<!-- CSS -->
<style>
 
 
/* ABSOLUTE - positionnement */  
 
.absolute {
        position: absolute;
        left: 0px;
        top: 0px;
        
        width: 250px;
        border: 2px solid blue;
        text-align: center;
  }
 
 
/* RELATIVE - positionnement*/  
 
.relative {
        position: relative;
        left: 0px;
        top: 0px;
        
        width: 250px;
        border: 2px solid green;
        text-align: center;
  } 
 
</style>

**NoSmoking** · 04/01/2024, 10h38

Bonjour,

Quelqu'un peut-il m'expliquer pourquoi les 2 div s'affichent un peu décalés ...

on va essayer

Les éléments en position:absolute le sont par rapport à leur ancêtre le plus proche positionné, autre que static, on appelle celui-ci le référent.

Dans ton cas ton élément <div class="absolute"> n'a pas d'ancêtre positionné, donc il est positionné par rapport au viewport. il se place donc en 0,0.

Ton élément <div class="relative"> est positionné par rapport à son parent direct soit <body>. Si ce parent est décalé, avec margin par exemple cet élément sera donc décalé également.

L'élément <body> a une marge par défaut, c'est souvent 8px, donc ton élément est décalé de 8px attendu qu'aucune valeur de margin n'est placée sur le <body>.

Pour régler ton soucis il te suffit d'appliquer le CSS suivant :

Code :

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

1
2
3
body {
  margin: 0;
}

... ton élément <div class="relative"> viendra se « coller » au bord de la page
ou encore :

Code :

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

1
2
3
body {
  position: relative;
}

... dans ce cas l'élément <body> deviendra le référent pour ton élément <div class="absolute">, il se superposera donc avec l'élément <div class="relative">.

Nota 1 : il existe d'autres façons pour définir un élément comme référent mais voilà pour commencer !

Nota 2 : La structure de ton document n'est pas très orthodoxe est devrait plutôt ressembler à :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Positionnement Relative - Absolute</title>
  <style>
    .absolute {
      position: absolute;
      left: 0px;
      top: 0px;
      width: 250px;
      border: 2px solid blue;
      text-align: center;
    }
    .relative {
      position: relative;
      left: 0px;
      top: 0px;
      width: 250px;
      border: 2px solid green;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="absolute">Position absolute</div>
  <div class="relative">Position relative</div>
</body>
</html>

**Jmimi** · 05/01/2024, 08h36

Bonjour, et un grand merci pour le temps passé... vous avez vraiment pris le temps pour me conseiller j'apprécie !

La marge du 'body' par défaut... c'est simple... quand on le sait.

Oui, mes docs ne sont pas très orthodoxes (je suis un amateur)... j'ai déjà modifié le utf-8 pour le mettre avant le titre.

C'est un modèle que j'utilise uniquement pour faire des tests. je trouve plus logique d'avoir le html d'abord, le paragraphe <style> étant destiné à être mis ailleurs (ds le css).

Merci encore !

Chevauchement de 'div'

CSS

Vue hybride

Discussions similaires

Partager

Partager