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
Thanks for reading my question
Please help
and Please tag while replying
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
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
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
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
Thank you so much for the help will try this out asap
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 🙂
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