Style Position Fixed in a better way

The CSS property position: fixed has become widely popular due to its ability to provide developers with precise control over element positioning on web pages. This powerful attribute not only enhances user experiences but also opens up innovative design possibilities. In this blog post, we will dive into the concept of position: fixed in CSS and explore its various use cases in today's modern world.

Understanding

With the CSS property position: fixed, developers can position an element in relation to the browser window, irrespective of scrolling. Unlike other positioning methods like position: absolute or position: relative, which depend on the document flow, position: fixed ensures that the element remains fixed within the viewport.

We generally use position: fixed for creating sticky navigation bars, headers, and footers. It is also useful for floating elements like chat widgets or social media sharing bars that can be fixed to a specific corner of the screen.

Simple Usage

.fixed {
  position: fixed;
  left: 0;
  right: 0;
  background: #000;
  bottom: 0;
  z-index: 100;
}

The example mentioned is useful when we need fixed content that is independent of the app. However, challenges arise when we require fixed content that depends on its parent section.

As a frontend developer, designing advanced layouts with scrolling and fixed content functionality can be very complex. This complexity increases when the fixed content is dependent on the parent sections, making it difficult to achieve the desired results. This can be particularly challenging for dynamic layouts and responsive designs.

Ninja Trick for such situations

<section class="parent">
    <div class="fixed-child-content">
        <div class="inner">
            This is position fixed content.
        </div>
    </div>
</section>

.parent {
  max-width: 768px;
  width: 100%;
  ...
}

.fixed-child-content {
  position: fixed;
  bottom: 0;
  max-width: inherit;
  width: 100%;
  ...
}

In the provided code, we have defined a parent container with the class name "parent". The maximum width of this container has been set to 768 pixels, while its width has been set to 100%, allowing it to take up the entire available width.

For the child element with the class name "fixed-child-content", we have set the position to "fixed". This means that the element will be removed from the normal document flow and remain fixed within the viewport.

The key aspect of this code is setting the maximum width to "inherit" for the child element. This ensures that it will inherit the maximum width specified by its parent element, in this case, the "parent" class. Additionally, we have set the width to 100%, allowing the fixed element to take up the entire width of its container.

Overall, this approach allows the fixed content to match the maximum width of its parent container, providing flexibility in controlling the position of the fixed content.

---

Check out the DEMO

Please note that the fixed content should be a direct child of its parent section.

---

Difficulties and Challenges

In addition, there are several challenges and issues that can arise when using position: fixed.

Overlapping Content

One of the primary concerns with fixed positioning is the potential for overlapping content. If fixed elements are not positioned with consideration for the surrounding content, they can obstruct important information or render parts of the page inaccessible.

Responsive Design Limitations

Fixed elements may not behave as expected on smaller screens, leading to inconsistencies in visual design or functionality.

Scrollable Areas

Using position: fixed within scrollable areas, such as divs with overflow properties, can result in conflicts. The fixed element may not scroll with the rest of the content within the scrollable area, leading to a disjointed user experience.

Performance Impact

Rendering fixed elements can impact page performance, particularly on lower-end devices or when working with complex layouts. Browsers need to continuously re-render fixed elements as users scroll, which can reduce performance and increase CPU usage.

Limited Placement Flexibility

While position: fixed allows for precise element placement, it can also limit positioning flexibility. Fixed elements are restricted to the viewport and cannot be positioned outside of it. This limitation can restrict creative possibilities for design concepts or interactions that require elements to be positioned in non-standard locations.

---

Conclusion

👏👏 By coming this far I hope you can use this awesome trick to style your position fixed divs and sections. This method really helps you to understand more about CSS Position Fixed property. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Comments

[Mads Stoumann]

For a full-screen overlay, you can use inset instead of bottom, top, left and right:

.overlay {
  inset: 0;
  position: fixed;
}

[Mohammed Awad]

do you know to style 3 section styled by grid and 2 section from the 3 are postion fixed. is there a way ? like I have 2 sidebar on the left and the right and in the middle not fixed contnent what is best approach to style this site

[Mads Stoumann]

If you have the following markup:

<body>
  <aside>Left</aside>
  <main>...</main>
  <aside>Right</aside>
</body>

... you can make the <aside>-tags sticky and the <main> scrollable with this CSS:

body {
  display: grid;
  grid-template-columns: 10rem 1fr 10rem;
}
aside {
  align-self: start;
  position: sticky;
  top: 0;
}

The 10rem are the widths of the <aside>-tags.

[Mohammed Awad]

stacky not fixed?

[Mads Stoumann]

Yes, sticky will behave like fixed when the value specified in top is reached.

[Mohammed Awad]

nice, thank you . how can I improve myself in html&css, I trid to strat from scratch again learn css grid css flex and built 6 or 7 side project but after 1 month I forget everything I learned.

[Mads Stoumann]

Just keep going ... experience is key!

[Mohammed Awad]

when I saw your code I said oh that make sence or that clever but when I think in differnt projects my solution bad I just use alot of padding margin and media queries .

[Mohammed Awad]

nice

[jdtjenkins]

I would always use position: absolute for setting the position of a child of a parent. You'll get a lot more control with absolutely positioned children.

As long as the parent has a position anything but static, the child will automatically take it's position and height from the parent.

[⚡ Nirazan Basnet ⚡]

Great

[John Landgrave]

It seems like the case you outlined (and the 3rd limitation) are solved in a more "purpose-built" way by position: sticky? Or am I missing something?

[⚡ Nirazan Basnet ⚡]

We need to adapt to the situation. When applied to an element, position: sticky allows it to behave like both a position: relative and a position: fixed element, depending on its position relative to the viewport. When we have multiple sections that are scrolling then position sticky can be very tricky.

However, it's always important to consider browser compatibility and ensure that the feature is supported across the targeted platforms and versions.

[artydev]

Thank you🙂