Henry Comments - Answer Overflow

Henry

•Created by Paran on 5/23/2024 in #front-end

Why does position: sticky doesn't work when parent is set to overflow: hidden?

FYI any parent element with overflow set to auto, scroll, or hidden establishes a new scrolling context, as Mark pointed out. In this context, the sticky element’s behavior is restricted to the bounds of this parent element. Source: https://www.w3.org/TR/css-overflow-3/#valdef-overflow-hidden

"A stickily positioned box is positioned similarly to a relatively positioned box, but the offset is computed with reference to the nearest ancestor with a scrolling box, or the viewport if no ancestor has a scrolling box."

Source: https://www.w3.org/TR/css-position-3/#sticky-pos when an element has position: sticky: - It sticks to the visible area of the webpage when its parent element scrolls off the viewport (overflow is actually visible, by default). - It affects the layout of other elements on the page, taking up additional space like a regular block element. In contrast, with position: fixed: - The element remains fixed in its position relative to the viewport, even when scrolling. - It doesn’t affect the flow of other elements. saikat's example illustrates this behavior perfectly. Without top: 0, the header behaves like a relative positioned element, following the normal flow of the document. https://css-tricks.com/video-screencasts/205-sticky-positioning-how-it-works-what-can-break-it-and-dumb-tricks

7 replies

KPCKevin Powell - Community

•Created by akira on 5/28/2024 in #front-end

How to prevent a div going under a sticky div?

Indeed. The parent container should have a defined height. Alternatively, check out this approach and let us know, akira https://codepen.io/henrytuxdev/pen/PovbVQo

5 replies

KPCKevin Powell - Community

•Created by akira on 5/28/2024 in #front-end

How to prevent a div going under a sticky div?

Hey @akira , could you please provide a sandbox or more context about the issue you are experiencing and the exact behavior you are expecting? Based on your screenshot, I'd say the sticky element is working as it should. When an element with position: sticky; reaches a specified scroll position (usually based on its parent container), it becomes “stuck” and remains in that position as the user scrolls. Did you intend to keep the input at the bottom, while the "chatbox" area is scrollable above the input?

5 replies

KPCKevin Powell - Community

•Created by iurychiga on 5/21/2024 in #front-end

centralize with margin: auto

Hey @iurychiga, Could you clarify what you mean by "...but i can put it in them width middle with margin: 0 auto "? To add on to @stillmorris 's reply, indeed, your .child doesn't have a specified width. Without a set width, the element will naturally take up the full width of its parent (assuming it’s a block-level element), and there won’t be any room for margins. The browser automatically calculates and sets equal margins on the left and right sides, centering the element horizontally within its parent: your .parent's parent is the <body>, which inherits <html>'s width, set by the viewport size. Note that margin: auto is margin: auto auto which translates into margin: 0 auto; because auto equals 0 when computed for top and bottom margins (by default). The browser doesn’t calculate equal top and bottom margins to center the element vertically because block-level elements (like your divs) are laid out vertically by default, one after the other. You could set display: flex or display: grid in your .parent and your margin: auto in the .child should work (again, so long as it has a width set, can be a percentage; and your parent has a height). Try it out! I believe this is known as setting a new block formatting context, in case you're wondering. Be careful with collapsing margins as well. For instance, when a margin is applied to a child element, it can affect the position of the parent element. If the parent element has no padding or border, and the child element has a top margin, then the child element’s margin collapses with the parent element’s margin, causing the parent element to move along with the child element. In case you haven't watched them yet, I encourage you to go through Kevin's playlist: https://www.youtube.com/watch?v=qKiz9gdJdr8 https://www.youtube.com/watch?v=EhbZGV2dqZ4&list=PL4-IK0AVhVjN1x-G7WHXs4y_Jo-MUocgf

3 replies

KPCKevin Powell - Community

•Created by Henry on 5/20/2024 in #front-end

Understanding the behavior of a container's margins and paddings when parent height is set to 100%

@b1mind Hey there! Thank you for taking the time to revise the example. You’re right, sticky is a game-changer in this scenario. Can’t believe it slipped my mind. Your advice is truly appreciated, I'll definitely have to dive deeper into Grid one day (I developed the bad habit of relying on flex for too long). As for the margin-bottom mystery, it’s still got me scratching my head a bit. I’ve been revisiting Kevin’s playlists on the topic, but I haven’t figured it out yet: https://www.youtube.com/watch?v=qKiz9gdJdr8 https://www.youtube.com/watch?v=EhbZGV2dqZ4&list=PL4-IK0AVhVjN1x-G7WHXs4y_Jo-MUocgf

9 replies

KPCKevin Powell - Community

•Created by Lloyd Peterson on 5/20/2024 in #front-end

Vertical Carousel Animation

@Nick Ji-Es Check this out. Not mine, but pretty sure the scroll behavior is quite close to what you are trying to do 🤔 https://codepen.io/Wataru-Ikeda-Kay/pen/bGybqqO Look into these properties:

  scroll-snap-type: x mandatory;
  scroll-timeline-name: --myScroller;
  scroll-timeline-axis: x;
  view-timeline: --cover;
  view-timeline-axis: inline;
  animation: z both linear;
  animation-timeline: --cover;
  animation-range: cover;

  scroll-snap-type: x mandatory;
  scroll-timeline-name: --myScroller;
  scroll-timeline-axis: x;
  view-timeline: --cover;
  view-timeline-axis: inline;
  animation: z both linear;
  animation-timeline: --cover;
  animation-range: cover;

Let us know how it goes! 🙂

9 replies

Gaming

Programming