Examples
Position Static
This is statically positioned content
Position Relative
This is relatively positioned content that doesn't affect the position of other elements which is why the text overlaps with the content that is set to position static.
This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content This is also statically positioned content
Position Relative + Absolute
This is an absolutely positioned element set to have offsets of top and left to 1rem with right and bottom offset by 4rem. It's parent with the light gray background is set to position relative.
This illustrates an absolutely positioned element that might always need to be in the top right of the content like a close button for a modal that needs to be dismissed.
/*
POSITIONING
*/
.pos-stat { position: static; }
.pos-rel { position: relative; }
.pos-abs { position: absolute; }
@media (--breakpoint-not-small) {
.pos-stat-ns { position: static; }
.pos-rel-ns { position: relative; }
.pos-abs-ns { position: absolute; }
}
@media (--breakpoint-medium) {
.pos-stat-m { position: static; }
.pos-rel-m { position: relative; }
.pos-abs-m { position: absolute; }
}
@media (--breakpoint-large) {
.pos-stat-l { position: static; }
.pos-rel-l { position: relative; }
.pos-abs-l { position: absolute; }
}
/* COORDINATES */
.top-0 { top: 0; }
.left-0 { left: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.top-1 { top: 1rem; }
.left-1 { left: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.top-2 { top: 2rem; }
.left-2 { left: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.top-4 { top: 4rem; }
.left-4 { left: 4rem; }
.right-4 { right: 4rem; }
.bottom-4 { bottom: 4rem; }
@media (--breakpoint-not-small) {
.top-0-ns { top: 0; }
.left-0-ns { left: 0; }
.right-0-ns { right: 0; }
.bottom-0-ns { bottom: 0; }
.top-1-ns { top: 1rem; }
.left-1-ns { left: 1rem; }
.right-1-ns { right: 1rem; }
.bottom-1-ns { bottom: 1rem; }
.top-2-ns { top: 2rem; }
.left-2-ns { left: 2rem; }
.right-2-ns { right: 2rem; }
.bottom-2-ns { bottom: 2rem; }
.top-4-ns { top: 4rem; }
.left-4-ns { left: 4rem; }
.right-4-ns { right: 4rem; }
.bottom-4-ns { bottom: 4rem; }
}
@media (--breakpoint-medium) {
.top-0-m { top: 0; }
.left-0-m { left: 0; }
.right-0-m { right: 0; }
.bottom-0-m { bottom: 0; }
.top-1-m { top: 1rem; }
.left-1-m { left: 1rem; }
.right-1-m { right: 1rem; }
.bottom-1-m { bottom: 1rem; }
.top-2-m { top: 2rem; }
.left-2-m { left: 2rem; }
.right-2-m { right: 2rem; }
.bottom-2-m { bottom: 2rem; }
.top-4-m { top: 4rem; }
.left-4-m { left: 4rem; }
.right-4-m { right: 4rem; }
.bottom-4-m { bottom: 4rem; }
}
@media (--breakpoint-large) {
.top-0-l { top: 0; }
.left-0-l { left: 0; }
.right-0-l { right: 0; }
.bottom-0-l { bottom: 0; }
.top-1-l { top: 1rem; }
.left-1-l { left: 1rem; }
.right-1-l { right: 1rem; }
.bottom-1-l { bottom: 1rem; }
.top-2-l { top: 2rem; }
.left-2-l { left: 2rem; }
.right-2-l { right: 2rem; }
.bottom-2-l { bottom: 2rem; }
.top-4-l { top: 4rem; }
.left-4-l { left: 4rem; }
.right-4-l { right: 4rem; }
.bottom-4-l { bottom: 4rem; }
}