De l'absolu dans du relatif en css
Résolu
nickleus
Messages postés
374
Date d'inscription
Statut
Membre
Dernière intervention
-
stan -
stan -
A voir également:
- De l'absolu dans du relatif en css
- La base de données de sécurité du serveur n'a pas de compte d'ordinateur pour la relation - Forum Logiciels
- La valeur relative de 9 dans 295 700 est - Forum CSS
- Enlever le soulignement d'un lien css - Astuces et Solutions
- Css exposant ✓ - Forum CSS
- Enlever trait sous un lien href ✓ - Forum Webmastering
7 réponses
Salut !
Disons que c'est pas très clair ! lol
En fait, en utilisant un positionnement absolu, tu sors l'élément du flux... Cela signifie qu'on ne positionne plus l'élément par rapport à son parent (comme en relatif), mais à partir du document.
Donc si tu positionnes ton bloc enfant en relatif, il va se positionner par rapport à son parent (son conteneur si tu préfères), et ce, peu importe que son parent soit positionner en relatif ou absolu.
Essaye tu verras :
<div style="position: absolute; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>
ou
<div style="position: relative; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>
Cela revient au même...
Si tu veux en savoir plus, je te conseille cette page : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS (c'est très bien expliqué et technique)...
Amicalement,
S@M...
http://kryoportail.ath.cx
Disons que c'est pas très clair ! lol
En fait, en utilisant un positionnement absolu, tu sors l'élément du flux... Cela signifie qu'on ne positionne plus l'élément par rapport à son parent (comme en relatif), mais à partir du document.
Donc si tu positionnes ton bloc enfant en relatif, il va se positionner par rapport à son parent (son conteneur si tu préfères), et ce, peu importe que son parent soit positionner en relatif ou absolu.
Essaye tu verras :
<div style="position: absolute; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>
ou
<div style="position: relative; top: 200px; left: 50px; width: 200px; height: 200px; background-color:#000099;"><div style="position: relative; top: 50px; left: 50px; width: 50px; height: 50px; background-color:#FF0099;"></div></div>
Cela revient au même...
Si tu veux en savoir plus, je te conseille cette page : http://css.alsacreations.com/Bases-et-indispensables/Comprendre-le-positionnement-des-balises-en-CSS (c'est très bien expliqué et technique)...
Amicalement,
S@M...
http://kryoportail.ath.cx
bJR
Evidemment que tu peux ;-)
Il faut bien comprendre que par défaut, même sans préciser explicitement "position= ...", toutes les balises imbriquées sont déjà positionnées de manière relative (mais pas au sens css ;-) par rapport à leur élément parent.
Même un élément dit static (positionnement par défaut) est positionnée de façon relative ... C'est pourquoi je trouve que l'utilisation du terme relative en css n'est pas judicieuse du tout ! Positionnement ajustable ou local aurait été préférable ...
En effet spécifié relative indique que l'élément peut être positionné par rapport à la position normale ou statique qu'il occupe dans le flux : sa position est donc relative non pas directement au coin au gauche de l'élément parent mais à sa position statique calculée dans l'élément parent nuance !
Note que du point de vue des éléments suivants, l'élément relatif "occupe" toujours la même place dans le flux même si tu le déplaces à l'aide de left ou top. Deux éléments peuvent donc se chevaucher.
Un élément positionné en absolu est placé de façon "relative" (quand je disais que le terme était mal choisi !) par rapport au coin au gauche de son élément parent. Attention ici l'élément parent n'est pas forcément l'élément qui contient directement l'élément enfant (pourquoi faire simple quand on peut se faire ch... !) : il faut remonter jusqu'au premier parent positionné en relatif ou absolu ou à défaut le document lui même.
Ex ici la balise divB se positionne par rapport au document car le conteneur divA est déclaré en static
Ici le divB, bien qu'il soit positionné de façon absolue, se positionne bien de façon relative au containe divA !
-
-
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
Evidemment que tu peux ;-)
Il faut bien comprendre que par défaut, même sans préciser explicitement "position= ...", toutes les balises imbriquées sont déjà positionnées de manière relative (mais pas au sens css ;-) par rapport à leur élément parent.
Même un élément dit static (positionnement par défaut) est positionnée de façon relative ... C'est pourquoi je trouve que l'utilisation du terme relative en css n'est pas judicieuse du tout ! Positionnement ajustable ou local aurait été préférable ...
En effet spécifié relative indique que l'élément peut être positionné par rapport à la position normale ou statique qu'il occupe dans le flux : sa position est donc relative non pas directement au coin au gauche de l'élément parent mais à sa position statique calculée dans l'élément parent nuance !
Note que du point de vue des éléments suivants, l'élément relatif "occupe" toujours la même place dans le flux même si tu le déplaces à l'aide de left ou top. Deux éléments peuvent donc se chevaucher.
Un élément positionné en absolu est placé de façon "relative" (quand je disais que le terme était mal choisi !) par rapport au coin au gauche de son élément parent. Attention ici l'élément parent n'est pas forcément l'élément qui contient directement l'élément enfant (pourquoi faire simple quand on peut se faire ch... !) : il faut remonter jusqu'au premier parent positionné en relatif ou absolu ou à défaut le document lui même.
Ex ici la balise divB se positionne par rapport au document car le conteneur divA est déclaré en static
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Positionnement</title>
<style>
*
{
font-family : arial;
font-size : 12pt;
}
body
{
margin : 8px;
padding : 0px;
}
.classA
{
position : static;
left : 20px;
top : 50px;
background-color : #F0F0F0;
width : 300px;
height : 500px;
}
.classB
{
position : absolute;
left : 50px;
top : 0px;
background-color : #FF0000;
width : 20px;
height : 150px;
}
</style>
</head>
<body>
<div id="divA" class="classA">
<div id="divB" class="classB">
</div>
</div>
</body>
</html>
Ici le divB, bien qu'il soit positionné de façon absolue, se positionne bien de façon relative au containe divA !
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xml:lang="fr" lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Positionnement</title>
<style>
*
{
font-family : arial;
font-size : 12pt;
}
body
{
margin : 8px;
padding : 0px;
}
.classA
{
position : relative;
left : 20px;
top : 50px;
background-color : #F0F0F0;
width : 300px;
height : 500px;
}
.classB
{
position : absolute;
left : 50px;
top : 0px;
background-color : #FF0000;
width : 20px;
height : 150px;
}
</style>
</head>
<body>
<div id="divA" class="classA">
<div id="divB" class="classB">
</div>
</div>
</body>
</html>
-
-
PhP
Il y a 10 types de personnes dans le monde : ceux qui comprennent le binaire et les autres ...
Re,
ERRATUM !
Vi, Bjr à bien fait d'agrémenter mon premier post, voir même de le corriger car je ne me rappelais plus de cette subtilité !
Alors en résumé et pour que tout soit clair !
Relatif = positionné par rapport à la place qu'il aurait du avoir si on ne l'avait pas retiré du flux.
Absolu = positionné par rapport à son parent c'est à dire le coin haut-gauche (et non pas par rapport au document comme je l'avais affirmé).
tsss... et dire que je suis webmaster !... lol
Bjr, tu confirmes !??
Amicalement,
S@M...
http://kryoportail.ath.cx
ERRATUM !
Vi, Bjr à bien fait d'agrémenter mon premier post, voir même de le corriger car je ne me rappelais plus de cette subtilité !
Alors en résumé et pour que tout soit clair !
Relatif = positionné par rapport à la place qu'il aurait du avoir si on ne l'avait pas retiré du flux.
Absolu = positionné par rapport à son parent c'est à dire le coin haut-gauche (et non pas par rapport au document comme je l'avais affirmé).
tsss... et dire que je suis webmaster !... lol
Bjr, tu confirmes !??
Amicalement,
S@M...
http://kryoportail.ath.cx
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Oui je confirme ! Et dire que je suis pas webmaster ... ;-)
Mais à condition de choisir le bon élément parent ... T'Oh !
En fait j'en arrive à me demander si le positionnement static n'est pas une grosse connerie et qu'au final je devrais pas utiliser exclusivement des éléments relatifs et absolus. Au moins qu'en j'imbrique un tag dans un autre je sais qui est son parent : celui qui dans le code est moins indenté d'un tabulation :-)
PS : mon pseudo c'est PHP
Bjr c'est pour dire Bonjour !!! LOL
Mais à condition de choisir le bon élément parent ... T'Oh !
En fait j'en arrive à me demander si le positionnement static n'est pas une grosse connerie et qu'au final je devrais pas utiliser exclusivement des éléments relatifs et absolus. Au moins qu'en j'imbrique un tag dans un autre je sais qui est son parent : celui qui dans le code est moins indenté d'un tabulation :-)
PS : mon pseudo c'est PHP
Bjr c'est pour dire Bonjour !!! LOL
Re,
Lol, je crois que je vais arrêter de parler....
J'en ai assez fait ce matin !...
Milles excuses à PhP...
et bonjour à Bjr ! lol
Bonne journée à tout les 2, moi je vais me coucher ! c'est plus sage....
Amicalement,
S@M...
http://kryoportail.ath.cx
Lol, je crois que je vais arrêter de parler....
J'en ai assez fait ce matin !...
Milles excuses à PhP...
et bonjour à Bjr ! lol
Bonne journée à tout les 2, moi je vais me coucher ! c'est plus sage....
Amicalement,
S@M...
http://kryoportail.ath.cx
oh la la. Merci pour toutes ses réponces c'est tout de suite plus claire ;)
D'ailleur vu que vous avez l'air d'être calé sur le sujet (et sans vouloir abuser) je vous laisse un autre post.
http://www.commentcamarche.net/forum/affich 8522485 creer un kit graphique
merci pour tout !!!!
D'ailleur vu que vous avez l'air d'être calé sur le sujet (et sans vouloir abuser) je vous laisse un autre post.
http://www.commentcamarche.net/forum/affich 8522485 creer un kit graphique
merci pour tout !!!!
En fait, en utilisant un positionnement absolu, tu sors l'élément du flux... Cela signifie qu'on ne positionne plus l'élément par rapport à son parent (comme en relatif), mais à partir du document.
Non ! Un élément absolu est postionné par rapport à son élément parent qui n'est pas forcément le document.
Le problème étant que le parent d'un tel élément n'est pas forcément son conteneur direct ! En fait il s'agit du premier conteneur (en supposant par ex qu'il existe N conteneurs imbriqués) positionné en absolu ou relatif ...