Miałem stronę internetową, którą podzieliłem na sekcje, każdasekcja z własną treścią. Niestety potrzebowałem jej, aby była responsywna, więc dałem elementowi ciała wyświetlacz: styl flex. sekta-1 i sekta-2 były dziećmi ciała, więc układają się zgodnie z oczekiwaniami. Problem polega na tym, że zawartość elementów flex była pozycjonowana absolutnie, jednak teraz nie jest już pozycjonowana z sekty-1 i sekty-2, a teraz całej strony Dlaczego pozycjonowanie bezwzględne ignoruje rodziców elementów elastycznych i co mogę zrobić, aby ustawić dzieci obiektów elastycznych?
HTML:
<body>
<div id="sect-1">
<h2 id="quote">I AM A WEB DESIGNER_</h2>
</div>
</body>
Kontener css:
body {
display: flex;
flex-direction: column;
overflow-x: hidden;
}
Pierwszy obiekt elastyczny:
#sect-1 {
background: none;
width: 100vw;
height: 100vh;
left: 0vw;
z-index: 98;
}
A obiekt, którego potrzebuję, pozycjonuje wewnątrz obiektu flex (nie kontenera):
#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);
}
Odpowiedzi:
1 dla odpowiedzi № 1Dla quote aby ustawić się wewnątrz elementu flex sect-1, sect-1 musi mieć pozycję inną niż static, normalnie relative to, czego się używa.
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>