De l'absolu dans du relatif en css
Résolu/Fermé
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
-
20 sept. 2008 à 19:23
stan - 3 mars 2014 à 15:10
stan - 3 mars 2014 à 15:10
A voir également:
- De l'absolu dans du relatif en css
- Taille bouton css - Forum HTML
- Css retour à la ligne - Forum CSS
- Absolu puzzle - Forum Réseaux sociaux
- Css exposant ✓ - Forum CSS
- La base de données de sécurité du serveur n'a pas de compte d'ordinateur pour la relation - Forum Windows serveur
7 réponses
kryoportail
Messages postés
222
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
22 mai 2014
125
21 sept. 2008 à 10:01
21 sept. 2008 à 10:01
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
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
5
21 sept. 2008 à 09:24
21 sept. 2008 à 09:24
Personne ne peut répondre à ma question ???
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
21 sept. 2008 à 10:11
21 sept. 2008 à 10:11
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 ...
kryoportail
Messages postés
222
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
22 mai 2014
125
21 sept. 2008 à 10:31
21 sept. 2008 à 10:31
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
PhP
Messages postés
1770
Date d'inscription
lundi 11 décembre 2000
Statut
Membre
Dernière intervention
23 décembre 2009
606
21 sept. 2008 à 10:43
21 sept. 2008 à 10:43
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
kryoportail
Messages postés
222
Date d'inscription
dimanche 10 août 2008
Statut
Membre
Dernière intervention
22 mai 2014
125
21 sept. 2008 à 11:18
21 sept. 2008 à 11:18
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
nickleus
Messages postés
374
Date d'inscription
dimanche 20 janvier 2008
Statut
Membre
Dernière intervention
18 juin 2011
5
21 sept. 2008 à 11:29
21 sept. 2008 à 11:29
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 !!!!
21 sept. 2008 à 10:36
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 ...