position absolute et relative

Version imprimable

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

position absolute et relative

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
27/08/2007, 11h08
Tober

1 pièce(s) jointe(s)

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...)
27/08/2007, 11h39
beeboo

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.
27/08/2007, 14h11
Tober

oui c'est une précision importante :P

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:

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>

28/08/2007, 09h55
Tober

8O
ça je connaissais pas non plus :mouarf:
decidement, ce forum est vraiment instructif :D
25/12/2007, 20h23
kriekbellevue

Comment faire alors pour que le relative concerne uniquement le div principal, et non le div qui le précède ? Y'a surement une option pour cela.

EDIT: suffit de poser la question, pour trouver la solution 2 minutes après, alors que je cherche depuis au moins 2 heures... :?