position absolute et relative [Fait]

**{F-I}** · 25/08/2007, 22h56

Salut à tous,

Connaissez-vous un tutorial qui permettre d'expliquer clairement la position absolute et la position relative...

Parce que je ne comprends jamais ces deux petits précisions...

Si vous avez / pouvez me montrer des exemples, je vous suis vraiment reconnaissant

Merci beaucoup d'avance de vos réponses

**Tober** · 27/08/2007, 11h08

Il y a plein de tutoriel de html/css partout sur le web qui explique très bien ça...
en gros position absolute positionne un élément indépendement de tout le reste du code (donc si tu met un element en absolute avec top : 100px et left : 100px, ton element restera quoiqu'il arrive en [100, 100])
la position relative, c'est plus subtile, si t'as un div et que tu es ton element en position relative a l'interieur de ce div, alors quand tu precisera un left ou un top ou ce que tu veux, ca se fera en fonction de la position du div (du contenant quoi...)

**beeboo** · 27/08/2007, 11h39

Il y a aussi une différence essentielle qui est la modification du flux des éléments.

En position relative, un élément se trouve positionné dans le flux des autres éléments du document html et, par sa présence, modifie le positionnement des autres éléments du flux.

En position absolute, un élément se trouve en dehors du flux et n'affecte pas le positionnement des autres éléments.

**Tober** · 27/08/2007, 14h11

oui c'est une précision importante

**MasterOfChakhaL** · 28/08/2007, 00h33

Salut,

Un autre précision qui peut aussi avoir son importance:

Un élément positionné en relative servira d'origine pour tous ses éléments enfant positionné en absolute (c'est également le cas pour un élément positionné en absolute).

Un petit exemple:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >
<html>
	<head>
		<style>
                        .test {
                                position: absolute;
                                top: 30px;
                                left: 30px;
                                border: 1px solid black;
 
                                height: 200px;
                                width: 200px;
                        }
                </style>
	</head>
	<body>
		<div class="test">1
			<div class="test">2
				<div class="test">3
					<div class="test">4
					</div>
				</div>
			</div>
		</div>
	</body>
</html>

**Tober** · 28/08/2007, 09h55

ça je connaissais pas non plus

decidement, ce forum est vraiment instructif

position absolute et relative [Fait]

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager