CSS - déplacement du point d'ancrage display:flex et position:absolute

Question

J'ai un élément Flex et trois éléments enfants. Le deuxième enfant doit chevaucher le premier enfant en utilisant un positionnement absolu comme ceci :

Attendu :

Notez que le deuxième enfant doit être au-dessus du premier enfant, pas à côté.

Cependant, définir display: flex sur le parent semble déplacer le point d'ancrage ou le point de référence de l'élément absolu au début du div. Le résultat réel est le suivant :

Résultats réels :

Mettre le deuxième élément enfant à l'intérieur du premier ou du troisième élément n'est pas une option car ils ont overflow:scroll. Il en va de même pour l'utilisation de tout autre attribut display sur le parent, puisque ma mise en page repose sur overflow:scroll。在父级上使用任何其他 display 属性也是如此，因为我的布局依赖于 display: flex. Je sais que ces solutions ont été suggérées dans d'autres articles, cependant, je n'ai pas trouvé de question/réponse répondant à ces limitations.

Utiliser autre chose que display:absolute sur le deuxième enfant fonctionne aussi, comme des marges négatives, mais je n'arrive pas non plus à le faire fonctionner.

Si quelqu'un sait si cela est possible ou a des suggestions, ce serait grandement apprécié.

Pour le voir en action, voici mon code, simplifié pour démontrer le problème :

body{
  color: white;
}
.wrapper{
  display: flex;
}
.wrapper .a{
  background-color: blue;
  flex-grow: 1;
}
.wrapper .b{
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
}
.wrapper .c{
  background-color: green;
  min-width: 40px;
}

<div class="wrapper">
  <div class="a">A</div>
  <div class="b">B</div>
  <div class="c">C</div>
</div>

Answer 1

Ajouter position:relative; au parent

Lorsqu'un élément reçoit l'attribut position:absolute; 属性时，它将通过 relative、absolute 或 fixed 定位来针对最近的父元素进行定位。如果没有找到，它将针对 body 进行定位。在这种情况下，您可能需要将 position:relative; 添加到 .wrapper, il sera positionné par rapport à l'élément parent le plus proche via un positionnement relatif, absolu ou fixe. S'il n'est pas trouvé, il ciblera body. Dans ce cas, vous souhaiterez peut-être ajouter

à l'élément .wrapper car c'est le point de référence pour le positionnement absolu.

Ajouter une valeur de positionnement à l'élément

position:absolute;Par définition, les éléments seront positionnés de manière absolue

en utilisant un ensemble de valeurs spécifique. C'est-à-dire à quelle distance du bord supérieur, droit, inférieur ou/et gauche. Lorsque vous ne fournissez aucune valeur, elle reste simplement dans le coin supérieur gauche, ce qui se passe ici.

Besoin de définir une valeur de positionnement

position:absolute; 从正常内容流中获取一个元素。也就是说，它周围的元素不会影响它的大小或位置；因此绝对位置。为了实现图中所示的效果，您需要指定 .c 元素的宽度，并使用相同的精确值从右边缘定位 .b

Obtenez un élément du flux de contenu normal. C'est-à-dire que les éléments qui l'entourent n'affectent pas sa taille ou sa position ; donc sa position

absolue

. Pour obtenir l'effet montré dans l'image, vous devez spécifier la largeur de l'élément .c et positionner l'élément .b à partir du bord droit en utilisant exactement les mêmes valeurs.

Veuillez consulter l'extrait de code ci-dessous pour référence.

🎜 🎜

body{
  color: white;
  --width: 80px;
}
.wrapper{
  display: flex;
  position: relative;
}
.wrapper .a{
  background-color: blue;
  flex-grow: 1;
}
.wrapper .b{
  position: absolute;
  right: var(--width);
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
}
.wrapper .c{
  background-color: green;
  width: var(--width);
}

  
A
  
B
  
C

🎜

Answer 2

Il apparaît à gauche du div car il a été retiré du flow du document. En fait, il est en fait positionné par rapport à la fenêtre plutôt qu'au wrapper parent. Pour le cibler sur le wrapper, définissez position:relative sur la classe wrapper pour créer un nouveau bloc contenant

Pour m'assurer qu'il chevauche la fin du div 'a', j'ai utilisé l'attribut 'right' pour déplacer le bord droit vers la gauche de la valeur que j'ai définie Attribut personnalisé, que j'ai défini sur cet attribut et div 'c '. Voir l'exemple annoté ci-dessous.

.wrapper {
  position: relative;
  display: flex;
  color: white;
  --element-c-width: 40px; /* set this to both set the width of div 'c' and how far we move div 'b' leftwards */
}

.a {
  background-color: blue;
  flex-grow: 1;
}

.b {
  position: absolute;
  background-color: rgba(255, 0, 0, 0.5);
  min-width: 40px;
  right: var(--element-c-width); /* from the right hand side of the wrapper div, move it leftwards by this value */
}

.c {
  background-color: green;
  min-width: var(--element-c-width);
}

  
A
  
B
  
C