Top layer
Middle layer
Bottom
Fixed & Sticky Demo with Horizontal Scrolling
Scroll down AND right to see how elements interact!
Check out the fixed elements in both corners! 👀
Welcome to the Enhanced Demo
This page demonstrates both fixed and sticky positioning with horizontal scrolling added! There’s a red fixed element in the top-right corner, and two overlapping purple/pink fixed elements in the top-left corner – they all stay in the same position relative to your browser window no matter how much you scroll vertically OR horizontally.
Notice how the left-side elements are layered with different z-index values, creating a cascading effect where each element peeks out from behind the one in front of it!
Keep scrolling vertically to see the sticky elements, and scroll horizontally to explore the wide content area!
🎨 Card 1
This is the first horizontal card. Notice how you can scroll horizontally to see more content while the fixed elements stay in place!
🚀 Card 2
The second card in the horizontal scroll area. The fixed elements remain anchored to the viewport corners.
⭐ Card 3
Third card showcasing how horizontal scrolling works with fixed positioning. Try scrolling left and right!
🎯 Card 4
Fourth card in the sequence. The page is now wider than your viewport, creating horizontal scroll.
🎪 Card 5
The final card in this horizontal section. Notice how everything works together beautifully!
About to Meet the Sticky Element
The next element you’ll encounter is sticky. It behaves normally until you scroll past it, then it “sticks” to the top of the viewport. Notice how it works with both vertical AND horizontal scrolling!
Now Keep Scrolling!
Notice how the sticky element above now stays at the top of your screen. As you continue scrolling vertically, you’ll see how both the fixed and sticky elements can end up covering the yellow button. The horizontal scrolling still works perfectly!
Long Journey to Bottom Sticky
You’ve scrolled quite a bit! The first sticky element should be firmly attached to the top of your viewport by now. Keep going to reach the second sticky element that will attach to the bottom. Don’t forget to try horizontal scrolling too!
Meet the Bottom Sticky!
The green element above is another sticky element, but this one sticks to the bottom of your viewport instead of the top. It will follow you as you scroll down, and works perfectly with horizontal scrolling too!
Understanding the Enhanced Behavior
Fixed positioning: The red element (top-right) and the two overlapping purple/pink elements (top-left) are positioned relative to the viewport and never move when you scroll vertically OR horizontally. The left-side elements use different z-index values (900, 800) to create the layered effect.
Top sticky positioning: The teal element switches between relative and fixed positioning based on vertical scroll position, sticking to the top while allowing horizontal movement.
Bottom sticky positioning: The green element works similarly but sticks to the bottom of the viewport instead.
Horizontal scrolling: The page is now wider than most viewports (2000px), creating smooth horizontal scrolling that works alongside vertical scrolling.
Covering effect: All positioned elements have high z-index values, allowing them to appear over other content like buttons.
The End
You’ve seen how fixed and sticky elements work with both vertical AND horizontal scrolling! The fixed elements never moved from their viewport positions, while the sticky elements followed you down the page after you scrolled past their initial positions.
Both element types work seamlessly with horizontal scrolling, and all elements can cover other content due to their positioning and z-index properties.