Arranging Content

Position

General
Code Snippets

Figure 1. Animation demonstrating state layer implementation.

No items found.

Overview

Position controls how an element's x,y coordinates are calculated. The default value is "static," and the other 4 properties cause different behavior.

Class Name CSS Properties Description
.position__static 
position: static;
The default position; the element is positioned according to the normal flow of the document.
.position__relative 
position: relative;
The element is positioned relative to its normal position, allowing for offset adjustments.
.position__absolute 
position: absolute;
The element is positioned relative to its nearest positioned ancestor or the initial containing block.
.position__fixed 
position: fixed;
The element is positioned relative to the viewport, meaning it stays in place even when the page is scrolled.
.position__sticky 
position: sticky;
top: 0;
The element is treated as relative until it crosses a specified scroll threshold, then it is treated as fixed.
content_copy
Copy Code
.position__static {
  position: static;
}

.position__relative {
  position: relative;
}

.position__absolute {
  position: absolute;
}

.position__fixed {
  position: fixed;
}

.position__sticky {
  position: sticky;
  top: 0;
}

Recommended Usage

Customization

Resources that mention this topic

No items found.
info

Get Help from a LiftKit Expert

arrow_forward
Book Quick Chat

Give Us Feedback

Click or tap to reveal form.
expand_more
check_circle
Success! An email has been sent to you with more details.
Please allow up to 5 minutes for it to arrive. Mailchimp can take a bit.
error
Error: Something went wrong. Email info@chainlift.io directly for assistance.

On This Page

Heading
Heading