(reprise du message précédent)
En l'occurrence le positionnement relatif seul peut poser problème car la place qu'aurait normalement occupée le bloc dans le flux est conservée et peut générer des décalages. Cela dit le positionnement absolu peut lui aussi poser problème comme cela est expliqué dans les tutos.
darkstar2023 a écrit :C'est juste que tu n'as pas bien compris la notion de premier ancêtre positionné. Un petit exemple :
Et effectivement, on joue sur l'alignement vertical avec position:relative; et non absolute (sinon l'élément se place selon body donc l'écran d'ordi).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Test</title>
<style type="text/css" media="screen">
#bloc1 {
width: 600px;
background: yellow;
height: 400px;
margin: 20px auto;
}
#bloc2 {
position: relative;
width: 400px;
background: blue;
height: 200px;
float: right;
}
#bloc3 {
width: 100px;
background: red;
height: 100px;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<div id="bloc1">
<div id="bloc2">
<div id="bloc3">
<p>Loremp Ipsum</p>
</div>
</div>
</div>
</body>
</html>En l'occurrence le positionnement relatif seul peut poser problème car la place qu'aurait normalement occupée le bloc dans le flux est conservée et peut générer des décalages. Cela dit le positionnement absolu peut lui aussi poser problème comme cela est expliqué dans les tutos.