How to make a form above from the container without disturbing the layout?

My current layout and the layout I want i have given. Here's my current code:-
8 Replies
Vaarun Sinha
Vaarun Sinha•8mo ago
Thanks for reading my question Please help and Please tag while replying
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
If you want to add elements without disturbing the layout you have to use position:absolute; position:absolute; will remove the element from the document flow and no space will be created for the element. Quote from MDN
The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
The element is removed from the normal document flow, and no space is created for the element in the page layout. The element is positioned relative to its closest positioned ancestor (if any) or to the initial containing block. Its final position is determined by the values of top, right, bottom, and left.

This value creates a new stacking context when the value of z-index is not auto. The margins of absolutely positioned boxes do not collapse with other margins.
Vaarun Sinha
Vaarun Sinha•8mo ago
No, that is not my question my question is on how to create that same effect as in the design where the form is outside the container and bigger than it Thanks for the help though
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
You could do it with position:absolute; or you could use grid and subgrid. I really don't know what the best way would be to do this tbh... But here is at least the best method i could come up with (it is written in pug and scss but you can click down arrow button in html/css box to view the compiled code) https://codepen.io/tok124/pen/poBgRxY
Tim
CodePen
poBgRxY
...
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
And yeah currently i have set a height on the grid-container, thats not something i would recommend. I added it just because i don't have enough content so just to get some height for this quick example
Vaarun Sinha
Vaarun Sinha•8mo ago
Thank you so much for the help will try this out asap
Tok124 (CSS Nerd)
Tok124 (CSS Nerd)•8mo ago
No problem 🙂 Sorry, i have updated the code. I realized that you don't really need to use subgrid ^^. Refresh the page to check the updated code 🙂
clevermissfox
clevermissfox•8mo ago
You could make the wrapping container the height of your largest element then use a pseudo element for the background colour underneath the elements too For the bg colour/bg image depending how that little illustration scene is being brought in
Want results from more Discord servers?
Add your server