J'apprends juste le positionnement en CSS. Sur la base de l'article que j'ai trouvé utile, j'ai commencé à jouer.
Avec le code suivant, je ne comprends pas pourquoi le div absolu de la zone grise est en dehors de son parent relatif. Je m'attendais à ce que la boîte grise soit dans le coin supérieur gauche du conteneur.
<div class="container"> <div class="box-orange"></div> <div class="box-grey"></div> <div class="box-blue"></div> <div class="box-green"></div> </div>
.container {
background: lightblue;
position: relative;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
Je ne peux pas non plus comprendre dans le cas suivant pourquoi la boîte grise n'est pas dans le coin supérieur gauche, mais déplacée après l'espace vide laissé par la boîte orange. Je viens de déplacer la zone grise à la deuxième place dans le conteneur div.
<div class="container"> <div class="box-orange"></div> <div class="box-blue"></div> <div class="box-green"></div> <div class="box-grey"></div> </div>
.container {
background: lightblue;
position: relative;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
Toute la documentation détaillée (par exemple MDN) et les didacticiels que je viens de trouver illustrant des exemples très simples avec 2-3 cases.
3 Réponses :
Vous devez toujours définir top: 0; left: 0; sur les éléments absolument positionnés (ou quelles que soient les valeurs souhaitées pour le haut, la droite, le bas, la gauche).
doit toujours -> ce n'est pas un must, ce sera simplement plus facile
Merci pour la grammaire isherwood :-)
Depuis le MDN >> L'élément est supprimé du flux de documents normal et aucun espace n'est créé pour l'élément dans la mise en page. Il est positionné par rapport à son ancêtre positionné le plus proche, le cas échéant; sinon, il est placé par rapport au bloc conteneur initial. Sa position finale est déterminée par les valeurs de haut, de droite, de bas et de gauche. C'est ce que je ne comprends pas pourquoi j'ai besoin d'utiliser les décalages
Tout d'abord, l'élément est positionné par rapport à son premier élément ancêtre positionné (non statique).
Dans ce cas, la position absolue fonctionne avec le frère, pas avec l'ancêtre.
À propos des ancêtres et des frères et sœurs, il existe une bonne documentation à ce sujet: Ancêtres et frères et sœurs
<div class="container"> <div class="box-orange2"></div> <div class="box-grey"></div> <div class="box-orange"></div> <div class="box-yellow"></div> </div>
.container {
background: lightblue;
position: relative;
}
.box-orange2 {
background: orange;
height: 100px;
width: 100px;
position: relative;
z-index: 2;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
.box-yellow {
background: yellow;
height: 100px;
width: 100px;
position: absolute;
}
Si je mets l'élément après le conteneur div, tout fonctionne sans problème
À propos de la deuxième partie, cette boîte apparaît là parce que la boîte-gery n'a pas d'importance sur le haut et à droite de la boîte verte, compris? Je vais mettre un exemple:
<div class="container"> <div class="box-grey"></div> <div class="box-orange"></div> <div class="box-blue"></div> <div class="box-green"></div> </div>
.container {
background: lightblue;
position: relative;
}
.box-orange {
background: orange;
height: 100px;
width: 100px;
position: relative;
top: 100px;
left: 100px;
z-index: 2;
}
.box-blue {
background: lightskyblue;
height: 100px;
width: 100px;
/*position: static;*/
}
.box-green {
background: lightgreen;
height: 100px;
width: 100px;
position: relative;
top: -105px;
left: 105px;
z-index: 2;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
Vous pouvez voir que les cases grises et jaunes ne changent pas le comportement même si le haut et la droite sont dans le frère ou non.
Merci beaucoup Alejandro, je voudrais vous poser des questions concernant la première partie que vous avez mentionnée, telle qu'elle était écrite dans chaque documentation: l'élément est positionné par rapport à son premier élément ancêtre positionné (non statique), cela signifie pour moi que le conteneur est le premier ancêtre positionné dans ce cas. Pourquoi la boîte grise n'est pas positionnée à sa place? Pourquoi ce n'est pas dans le coin supérieur gauche du conteneur?
Salut, l'ancêtre du gris-boîte n'est pas un conteneur, il est vert-boîte. box-green est posté en haut: -105px; et à gauche: 105px ;, si vous supprimez ces propriétés, vous verrez que la boîte-gris est juste sous la boîte-verte. C'est parce que l'ancêtre est l'élément qui est juste avant Cordialement
alors mais ce que vous dites est faux, le box-green n'est pas un ancêtre du box-gray, c'est un élément frère. L'ancêtre n'est pas l'élément before
C'est vrai, désolé. Mais, la position de la propriété fonctionne bien avec les frères et sœurs, donc j'ai supposé que l'ancêtre était au sommet.
Alejandro vous avez raison. Je ne sais pas pourquoi, mais vous avez raison, car je pensais que, comme Temani l'a écrit, l'ancêtre est l'élément qui contient l'élément courant. Pas le frère. Mais je l'ai testé, et le frère fonctionne comme un ancêtre dans le cas actuel. Si vous modifiez votre réponse pour contenir ces informations, je vais accepter que ce soit comme une réponse. Veuillez mettre en évidence la partie la plus importante, la première ligne de votre réponse
@MontyX non! il n'a pas raison. C'est faux. comme je vous l'ai dit, vous devez définir les propriétés top / left pour voir le résultat souhaité ( top: 0; left: 0 ). et l'ancêtre n'est pas l'élément précédent
Bien sûr, mais, l'information que l'ancêtre est l'élément qui contient l'élément actuel? Je veux dire, cette information: sebastian.expert/…
@AlejandroGranados oui un ancêtre est au moins au niveau supérieur, pas nécessairement le premier conteneur, cela peut être le conteneur du conteneur du conteneur
@MontyX Si je ne trouve pas de doublon, j'ajouterai une réponse détaillée pour l'expliquer
Temani, vous avez raison, mais pouvez-vous m'expliquer s'il vous plaît pourquoi cela ne fonctionne pas sans le haut: 0; gauche: 0 ;? J'aimerais le comprendre, car la documentation ne dit rien à ce sujet en haut / à gauche / etc. les propriétés sont obligatoires en cas d'absolu pour atteindre le résultat attendu.
@MontyX voici le document officiel: w3.org/ TR / CSS2 / visudet.html # abs-non-replacement-height .. pas facile à aborder au début, vous pouvez le lire plusieurs fois
@TemaniAfif pouvez-vous ajouter ceci à votre réponse s'il vous plaît? J'aimerais l'approuver.
Pour bien comprendre cela, vous devez vous référer au spécification officielle où vous trouvez l'équation à laquelle l'élément doit satisfaire:
<div class="container"> <div class="box-green"></div> <div class="box-grey" style="position:static;">I am static</div> </div> <div class="container"> <div class="box-green"></div> <div class="box-grey"></div> </div>
Nous n'avons pas de bordure et de remplissage donc dans votre cas, il sera simplement:
.container {
background: lightblue;
position: relative;
padding:40px 20px;
display:inline-block;
vertical-align:top;
width: 250px;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
top:0;
}
.box-green {
height:20px;
background:green;
}Et si vous lisez ci-dessous, vous trouverez ceci:
- «haut» et «bas» sont «auto» et «hauteur» n'est pas «auto», puis définissez «haut» sur la position statique , définissez les valeurs «auto» pour «marge- top 'et' margin-bottom 'à 0, et résolvez pour' bottom '.
Donc, dans votre cas, vous avez défini une hauteur et gardé top / bottom sur auto donc le haut sera défini sur position statique
.. Plus précisément, la position statique pour 'top' est la distance entre le bord supérieur du bloc contenant et le bord supérieur de la marge d'une boîte hypothétique qui aurait été la première boîte de l'élément si sa position spécifiée 'valeur était' statique '..
Pour vous faciliter la tâche, c'est la position de l'élément si vous n'avez pas défini position:absolute .
Voici une illustration simple pour mieux comprendre
<div class="container"> <div class="box-green"></div> <div class="box-grey" style="position:static;">I am static</div> </div> <div class="container"> <div class="box-green"></div> <div class="box-grey">I am absolute</div> </div>
.container {
background: lightblue;
position: relative;
padding:40px 20px;
display:inline-block;
vertical-align:top;
width: 250px;
}
.box-grey {
background: grey;
height: 100px;
width: 100px;
position: absolute;
}
.box-green {
height:20px;
background:green;
}
Notez la position statique du premier élément qui est conservée si nous ajoutons position: absolue . Nous n'avons spécifié aucune valeur supérieure, le navigateur utilisera donc une valeur par défaut qui est celle de la position: static (position par défaut) de l'élément.
Si vous ne le faites pas Je ne veux pas cela, définissez simplement la valeur supérieure et vous tombez dans cette règle:
- 'bottom' est 'auto', 'top' et 'height' ne sont pas 'auto', puis définissez les valeurs 'auto' pour 'margin-top' et 'margin-bottom' sur 0 et résolvez pour 'bottom'
'top' + 'margin-top' + 'height' + 'margin-bottom' + 'bottom' = height of containing block
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
La même logique s'applique à le propriété de gauche
Vous pouvez également remarquer l'utilisation du mot bloc contenant qui est très important ici et expliqué dans le même spécification
La position et la taille de la ou des boîtes d'un élément sont parfois calculées par rapport à un certain rectangle, appelé bloc contenant de l'élément. Le bloc conteneur d'un élément est défini comme suit:
...
- Si l'élément a 'position: absolute', le bloc conteneur est établi par l'ancêtre le plus proche avec une 'position' de 'absolu', 'relatif' ou 'fixe', de la manière suivante:
...
Et ce n'est pas suffisant car il existe d'autres propriétés (listées ci-dessous) qui établissent également un bloc conteneur afin que vous puissiez avoir un élément positionné par rapport à un ancêtre qui n'est pas positionné!
: Pourquoi l'application d'un CSS-Filter sur le parent rompt le positionnement de l'enfant?
vous n'avez défini aucun haut / gauche .. mis haut / gauche pour contrôler la position ou il sera positionné en fonction de sa position statique . Puisque vous apprenez toujours pas besoin de vous tromper sur cette position par défaut