DEV Community

Cover image for Style Position Fixed in a better way

Style Position Fixed in a better way

⚡ Nirazan Basnet ⚡ on June 20, 2023

The CSS property position: fixed has become widely popular due to its ability to provide developers with precise control over element positioning o...
Read full post
Collapse
 
madsstoumann profile image
Mads Stoumann •

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

.overlay {
  inset: 0;
  position: fixed;
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
xmohammedawad profile image
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

Collapse
 
madsstoumann profile image
Mads Stoumann • • Edited

If you have the following markup:

<body>
  <aside>Left</aside>
  <main>...</main>
  <aside>Right</aside>
</body>
Enter fullscreen mode Exit fullscreen mode

... 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;
}
Enter fullscreen mode Exit fullscreen mode

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

Thread Thread
 
xmohammedawad profile image
Mohammed Awad •

stacky not fixed?

Thread Thread
 
madsstoumann profile image
Mads Stoumann •

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

Thread Thread
 
xmohammedawad profile image
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.

Thread Thread
 
madsstoumann profile image
Mads Stoumann •

Just keep going ... experience is key!

Thread Thread
 
xmohammedawad profile image
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 .

Collapse
 
xmohammedawad profile image
Mohammed Awad •

nice

Collapse
 
jdtjenkins profile image
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.

Collapse
 
nirazanbasnet profile image
⚡ Nirazan Basnet ⚡ •

Great

Collapse
 
johnlandgrave profile image
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?

Collapse
 
nirazanbasnet profile image
⚡ 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.

Collapse
 
artydev profile image
artydev • • Edited

Thank you🙂