Fix a header element's position above another element

Question

I am trying to position the header above my form and I want it to move with the form. Instead, it moves behind the form when the screen is being zoomed in and towards the very top when it is being zoomed out, which creates a big gap in between the two. I am copy-pasting both of the codes from html and CSS.

My background picture is set to: position:fixed; The form is position:absolute; And the header position: relative.

Answer 1

Make sure that the css for the header is not set as position:fixed; if you want the header to scroll with the form. Hope this helps! If you have any other questions feel free to ask. Heres updated code:

.header {
     position:static;
}