Ideas - -Full Stack MERN Web Development
CSS Fixed Positioning
- Fixed Position
- An element is removed from the normal flow, and positioned relative to the viewport
- It's like Absolute positioning, except it's positioning is relative to the view-port (page) instead of it's relative ancestor.
- This means it always stays in the same place even if the page is scrolled.
- The top, right, bottom, and left properties are used to position the element.
- A fixed element does not leave a gap in the page where it would normally have been located.
- Most commonly used for fixed elements such as Headers, Footers, and Navigation Menu's.
- When to Use
- Most commonly used for fixed elements such as Headers, Footers, and Navigation Menu's.
- Ideal for elements that must stay visible during scrolling
- Useful for overlays such as modals with fixed position on a scrollable background.
- Important Rules
- Use sparingly. It can obscure content, especially on small screens
- Be careful of overlapping content, especially on smaller screens
- Use media queries for better control on different screen sizes.
Now, in the following example, we used fixed positioning on the "NAV BAR".
We positioned it "top: 65px;" which forced it to the top of the page, right below my header bar.
Welcome to Our Website
Explore our site and learn more about what we do.
About Us
We are a dedicated team passionate about our work. Learn more about our mission, vision, and values.
Contact Us
Have questions? Reach out to us through the contact form below.