Éléments de position à l'intérieur de l'enfant de "display: flex"

-2

J'avais une page Web que je divisais en sections, chaque section avec son propre contenu. Malheureusement, j'avais besoin d'être réactif, alors j'ai donné à l'élément de corps un affichage: style flex. sect-1 et sect-2 étaient des enfants du corps, donc ils s'empilent, comme prévu. Le problème est que le contenu à l'intérieur des éléments flex était positionné de manière absolue, mais maintenant il n'est plus positionné à partir des sect-1 et sect-2, et maintenant de la page entière. Pourquoi le positionnement absolu ignore-t-il les parents d'éléments flexibles, et que puis-je faire pour positionner les enfants des objets flexibles?Éléments de position à l'intérieur de l'enfant de "display: flex"

Le code HTML:

<body> 
    <div id="sect-1"> 
     <h2 id="quote">I AM A WEB DESIGNER_</h2> 
    </div> 
</body>

Le conteneur css:

body { 
    display: flex; 
    flex-direction: column; 
    overflow-x: hidden; 
}

Le premier objet flex:

#sect-1 { 
    background: none; 
    width: 100vw; 
    height: 100vh; 
    left: 0vw; 
    z-index: 98; 
}

Et l'objet je besoin positionnement à l'intérieur de l'objet flexible (non récipient):

#quote { 
    align-content: left; 
    font-family: Courier New; 
    color: black; 
    font-size: 25px; 
    letter-spacing: 5px; 
    line-height: 0px; 
    width: 500px; 
    position: absolute; 
    top: calc(50vh - 12.5px); 
    left: calc(50vw - 190px); 
}

Source

2017-08-23 Josh Lyness

Flexbox ne peut pas simplement * changement * la propriété 'position'. Je dirais qu'il y a quelque chose que vous ne nous avez pas montré dans votre code ... quand vous nous montrez cela ... –

C'est vraiment très simple. Je vais éditer ma question. Ce n'est pas que je m'attends à ce qu'il change de position, j'ai besoin de positionner les éléments à l'intérieur d'un objet flexible (pas le conteneur) –

Les éléments Flex ne se positionneront absolument pas à moins que vous ne leur disiez ... pas que je pense que c'est une bonne idée mais cela dépendra de ce que vous essayez de faire. –

Pour la quote de se positionner à l'intérieur de l'élément flexible sect-1, le sect-1 besoin d'avoir une position autre que static, normalement relative est ce que l'on utilisation.

body { 
 
    display: flex; 
 
    flex-direction: column; 
 
    overflow-x: hidden; 
 
} 
 

 
#sect-1 { 
 
    position: relative;  /* added */ 
 
    background: none; 
 
    width: 100vw; 
 
    height: 100vh; 
 
    left: 0vw; 
 
    z-index: 98; 
 
} 
 

 
#quote { 
 
    align-content: left; 
 
    font-family: Courier New; 
 
    color: black; 
 
    font-size: 25px; 
 
    letter-spacing: 5px; 
 
    line-height: 0px; 
 
    width: 500px; 
 
    position: absolute; 
 
    top: calc(50vh - 12.5px); 
 
    left: calc(50vw - 190px); 
 
}

<body> 
 
    <div id="sect-1"> 
 
     <h2 id="quote">I AM A WEB DESIGNER_</h2> 
 
    </div> 
 
</body>

Source

2017-08-23 14:51:18 LGSon

Ouais wow, j'ai oublié j'ai enlevé la position: absolue de l'enfant du conteneur flexible, donc le positionnement absolu utilisait le parent non statique suivant. Merci –

Éléments de position à l'intérieur de l'enfant de "display: flex"

Répondre

Questions connexes