form's child (modal) pos'd absolute, but top:0, left:0 settings still relating it to form's edges
GH: https://github.com/nnall/DevJobs-FEM.git
Live: https://main--dynamic-salmiakki-7aaccb.netlify.app/
I have a child popout modal, which is a child of of a searchbar form element. When you click a certain button in the search bar, this modal un-hides and is supposed to cover the entire viewport.
I've set the modal popout to height:100vh, width:100vw, position:absolute, and top:0, left:0, but it is still treating the form's edge as the leftmost and topmost that it can go. (pic)
I've set the modal element to position:absolute, but since its grandparent (<header>) needs to remain position: fixed, I couldn't make it relative, so I tried making header's parent, <body>, position:relative, but that didn't work either.
GitHub
GitHub - nnall/DevJobs-FEM
Contribute to nnall/DevJobs-FEM development by creating an account on GitHub.
4 Replies
Your modal is defined within the form.
Your form has an absolute position set on it's class ".searchbarcontainer"
Therefore the dialog is being set to absolute relative to this.
Furthermore the .searchbarcontainer class is also set to a negative left position. If you remove both it's absolute position and negative left it should work as you want it to.
It worked, thank you very much!
So if an abs positioned child doesn't have a relative ancestor to relate to, it will just relate to the first absolute ancestor it has?
And then the transform:translatex I hhad on the parent was affecting it how?
An absolute position will be positioned relative to the first parent selector it finds with its position defined be it absolute or relative (and presumably fixed and sticky though I have never tried that).
The transform translate was only needed as you were positioning the search form with absolute which wasn’t really needed. However once you removed the absolute positioning the translate was moving it off to the side.
right, okay. These things still trip me up into over-engineering the positioning, adding more things because of other things I don't need. Anyway, thank you again.