Kevin Powell - Community•15mo ago

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?

Matthew

CodePen

picaso assignment

...

6 Replies

ABK | Muneer•15mo ago

@Leftydo you want to make your form inside the image or below it?

ABK | Muneer•15mo ago

ABK | Muneer•15mo 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%);
}

LeftyOP•15mo ago

@ABK | Muneer Thank you, my aim is for the forum to be below

ABK | Muneer•15mo 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

LeftyOP•15mo ago

Ohh that makes sense I’ll try it thank you Got it, this worked perfectly!

Gaming

Programming

Getting back into the document flow after using Positioning Absolute.