Positions and z-index

→ static -

• default
• element will stick to the normal page flow,
• positional properties won't work left/right/top/bottom/z-index - NA

Position Property in CSS

Different position values:

→ static

→ relative

→ absolute

→ fixed

→ sticky

→ inherit

positional properties:

• top, bottom -
• left, right -
• auto -
• inherit -

• z-index - 
  any of the valid CSS unit (px, rem, vw, vh etc)
  a percentage of the of the containing element’s height (for top and bottom) or width (for left and right)

Position Property in CSS

→ relative -

• it really means “relative to itself”
• element will remain in normal page flow,
• but now left/right/top/bottom/z-index will work,
• relative to where it would have been if the positional property wouldn’t have been applied
• z-index gets added

Position Property in CSS

→ absolute -

• the element is removed from the flow of the document and other elements will behave as if it’s not even there -
• positional properties left/right/top/bottom/z-index will work

Position Property in CSS

→ fixed -

• just like absolute
• - only difference - fixed positioned elements are always relative to the document, not any particular parent, and
• are unaffected by scrolling

relative, absolute and fixed.

→ sticky -

• the element is treated like a relative value until the scroll location of the viewport reaches a specified threshold, at which point the element takes a fixed position

→ inherit -

• inherit the positioning value from its parent

Position Property in CSS

Twitter web app scroll implementation:

1. Fixed Navigation Bar:

   • The .nav-bar is set to position: fixed;, which keeps it at the top of the viewport at all times during scrolling.

2. Main Feed Section:

   • The .feed-section contains multiple "tweets." This section scrolls normally with the page,

3. Sticky Right Sidebar:

   • The .right-sidebar contains sticky content. Using position: sticky; on the .sticky-content and setting top: 70px;, this content sticks to the top of the sidebar as you scroll, but once you reach the end of its content, it stops scrolling.

Position Property in CSS

Facebook web app scroll implementation:

1. Main Feed Scrolling:

   • The central feed (posts from friends, pages, etc.) scrolls normally, just like a standard webpage. As the user scrolls down, more content is dynamically loaded (infinite scroll).

2. Left Sidebar:

   • The left sidebar (with links to your profile, pages, groups, shortcuts, etc.) is static. It stays at the top and scrolls with the page, so the entire sidebar moves along as you scroll down.

3. Right Sidebar:

   • The right sidebar contains sections like “Contacts,” “Groups,” or ads.
   • The top section of the right sidebar (like “Contacts” or the “Create Room” button) remains sticky, meaning it stays in place when you scroll past a certain point.
   • The lower section (like ads or other information) scrolls normally.

Position Property in CSS