Tout d'abord, la conclusion
Le positionnement absolu est relatif à la bordure intérieure du parent positionné, que le dimensionnement de la boîte du parent soit border-box ou content-box
2. Notions connexes
Concept 1, position : positionnement absolu absolu
position:absolute Le positionnement absolu est positionné par rapport à l'élément parent positionné le plus proche de lui-même. Si l'élément parent n'est pas positionné, il trouvera le grand-père. . . jusqu'à html.
Concept 2, modèle de boîte
Modèle de boîte, tous les éléments html peuvent être considérés comme une boîte, composée de contenu, remplissage, bordure, marge. Parmi eux, le modèle de boîte IE box-sizing: border-box, le modèle de boîte standard box-sizing: content-box;
Étape 3、box-sizing:border-box | boîte de contenu
box-sizing : content-box signifie la largeur réelle de l'élément = width + padding + border
box-sizing : border-box signifie la largeur réelle de l'élément = largeur = largeur du contenu + rembourrage + bordure
grande empathie
3. Description du code
Position du paramètre parent : relative ; dimensionnement de la boîte : border-box ; Position du paramètre enfant : absolu ; gauche : 100 % ; Le code ci-dessus consiste à positionner la boîte enfant à droite de la boîte parent ;
<!DOCTYPE html>
<html>
<head>
<title>定位</title>
<style type="text/css">
.parent{
width: 200px;
height: 300px;
display: block;
text-align: right;
background: #0056B1;
border: 20px solid #86C671;
box-sizing: border-box;
position: relative;
}
.child{
width: 100px;
height: 200px;
display: block;
text-align: right;
background: #CEF6FF;
border: 20px solid #F67539;
box-sizing: border-box;
position: absolute;
top: 0;
left: 100%;
}
</style>
</head>
<body>
<div class="parent">
父
<div class="child">子</div>
</div>
</body>
</html>4. Description du phénomène
| gauche : 100 % | gauche : 0 |
 |
 |
C'est étrange, car le parent box-sizing est défini sur border-box, donc la gauche de l'enfant est définie sur 100%, pensant que 100% est la largeur réelle de la boîte parent, et elle sera naturellement positionnée à droite de la boîte mère. Cependant, en fait, il n'est positionné qu'à l'intérieur de la bordure droite. De même, si la gauche de l'enfant est définie sur 0, il n'est pas positionné à l'extrême gauche du parent, mais à l'extrême gauche de la bordure intérieure du parent. Même avec un rembourrage, il est toujours à l'intérieur de la bordure.
Bien sûr, nous avons différentes façons de répondre à la demande, mais ce n'est pas le même que le résultat imaginé.
5. Analyse
Il y a un dicton à propos du modèle de boîte dans le didacticiel des débutants : "Le modèle de boîte nous permet de placer des éléments dans l'espace entre d'autres éléments et les bordures des éléments environnants."
La compréhension personnelle est que bien que la position de l'enfant: absolue soit hors du flux de documents normal, parce que le parent est position: relative, la relation entre l'enfant et le parent est toujours là. Les caractéristiques du modèle de boîte parent font que le positionnement de l'enfant est basé sur la bordure. Quant à savoir si le parent est une bordure, cela n'a rien à voir avec le positionnement de l'enfant, car il s'agit des attributs de largeur et de hauteur du parent lors de la mise en page de l'ensemble du document.
Ne représentent que des opinions personnelles, bienvenue pour discuter ~~~