Streaming live at 10am (PST)

Fixed positioning


I’m still having problems with fixed elements moving around on me. I guess I’m not sure where to style the element: on the div, container, link block or image. The elements in question are the blue YouTube marker and the H1 heading. I input the x,y,z coords and it still moves all over the place. I am missing something!

The water/cloud hero BG is fixed so the parallax navigation below will scroll up and over top of the hero BG and everything within the hero BG frame.

Here is what it should look like with the H1 and the Blue YouTube marker fixed:

Yet this is the result I am getting using fixed positioning:

This problem has perplexed me for far too long! I’m hoping Super @Waldo will save the day again!!!

Here is my public share link:

Hey @Brian_M_Fromknecht from a quick glance, I saw that you have a setting of 190px margin top on that heading. Instead of using a pixel margin, try using a percentage based margin like 8% or 10%. :slight_smile:

You may also want to consider instead having the image be part of the background image, just make it a centered div and the youtube point sitting inside of that div. Flexbox makes it pretty simple to create Centered vertically/horizontal child elements. Have you had a chance to review this tutorial on centering elements with flexbox?

Feel free to reach out to me here if you have any questions :smiley:

I will try both and see what results I get and let you know how it pans out… Thanks Waldo!

1 Like

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.