Getting back into the document flow after using Positioning Absolute.

I'm trying to add a form after my css image for a school assignment and I can't figure out how to make it show under my img-container. https://codepen.io/tehlefty/pen/YzdaPPM?editors=1100 Any thoughts?
6 Replies
ABK | Muneer
ABK | Muneer14mo ago
@Leftydo you want to make your form inside the image or below it?
ABK | Muneer
ABK | Muneer14mo ago
No description
ABK | Muneer
ABK | Muneer14mo ago
like this? just add this to your Css
form{
background-color: black;
display: grid;
padding: 20px 10px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
form{
background-color: black;
display: grid;
padding: 20px 10px;
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
Lefty
Lefty14mo ago
@ABK | Muneer Thank you, my aim is for the forum to be below
ABK | Muneer
ABK | Muneer14mo ago
ok buddy just add this to ur css then
.img-container{
min-height: 100vh;
}
form{
background-color: black;
display: grid;
padding: 20px 10px;
color: white;
}
.img-container{
min-height: 100vh;
}
form{
background-color: black;
display: grid;
padding: 20px 10px;
color: white;
}
the reason why it didn't work is because the art that's mad is almost like a absolute positions so the form always was behind the art so to fix it we can declare that the ark is taking the whole screen and what ever next go below it and not inside it to the back
Lefty
Lefty14mo ago
Ohh that makes sense I’ll try it thank you Got it, this worked perfectly!
Want results from more Discord servers?
Add your server