Position
Html elements are initially set to a position of 'static'. Tachyons provides classes
for setting position to be relative or absolute.
Absolute elements are
absolutely positioned inside of a relative element. You can use absolute
positioning to stretch elements making sure they fill the width and height of a
relative container. Relatively positioned elements offer the ability to offset
the position of an element without affecting the position of any elements
around it. This module should be used in conjunction with the coordinates
module which is used to give working examples on this page.
css also provides an option for setting position to 'sticky' but it is not included in this module.
If you do find it useful you could easily extend the
position module to include this option. It should be noted that
sticky is not well supported at the moment. If the provided
coordinates don’t suit your needs the module is easy to extend to add any
values you might need.
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 2rem. It’s parent with the light gray background is set to position relative.
X
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.
tachyons-position
v6.0.7
169 B
- Declarations
- 16
- Selectors
- 16
- Max. Specificity Score
- 10
- Size of Avg. Rule
- 1
src/_position.css
/*
POSITIONING
Docs: http://tachyons.io/docs/layout/position/
Media Query Extensions:
-ns = not-small
-m = medium
-l = large
*/
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
@media (--breakpoint-not-small) {
.static-ns { position: static; }
.relative-ns { position: relative; }
.absolute-ns { position: absolute; }
.fixed-ns { position: fixed; }
}
@media (--breakpoint-medium) {
.static-m { position: static; }
.relative-m { position: relative; }
.absolute-m { position: absolute; }
.fixed-m { position: fixed; }
}
@media (--breakpoint-large) {
.static-l { position: static; }
.relative-l { position: relative; }
.absolute-l { position: absolute; }
.fixed-l { position: fixed; }
}
@custom-media --breakpoint-not-small screen and (min-width: 48em);
@custom-media --breakpoint-medium screen and (min-width: 48em) and (max-width: 64em);
@custom-media --breakpoint-large screen and (min-width: 64em);
/*
COORDINATES
Use in combination with the position module.
*/
.top-0 { top: 0; }
.right-0 { right: 0; }
.bottom-0 { bottom: 0; }
.left-0 { left: 0; }
.top-1 { top: 1rem; }
.right-1 { right: 1rem; }
.bottom-1 { bottom: 1rem; }
.left-1 { left: 1rem; }
.top-2 { top: 2rem; }
.right-2 { right: 2rem; }
.bottom-2 { bottom: 2rem; }
.left-2 { left: 2rem; }
.top--1 { top: -1rem; }
.right--1 { right: -1rem; }
.bottom--1 { bottom: -1rem; }
.left--1 { left: -1rem; }
.top--2 { top: -2rem; }
.right--2 { right: -2rem; }
.bottom--2 { bottom: -2rem; }
.left--2 { left: -2rem; }
.absolute--fill {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
@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--1-ns { top: -1rem; }
.right--1-ns { right: -1rem; }
.bottom--1-ns { bottom: -1rem; }
.left--1-ns { left: -1rem; }
.top--2-ns { top: -2rem; }
.right--2-ns { right: -2rem; }
.bottom--2-ns { bottom: -2rem; }
.left--2-ns { left: -2rem; }
.absolute--fill-ns {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@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--1-m { top: -1rem; }
.right--1-m { right: -1rem; }
.bottom--1-m { bottom: -1rem; }
.left--1-m { left: -1rem; }
.top--2-m { top: -2rem; }
.right--2-m { right: -2rem; }
.bottom--2-m { bottom: -2rem; }
.left--2-m { left: -2rem; }
.absolute--fill-m {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
@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--1-l { top: -1rem; }
.right--1-l { right: -1rem; }
.bottom--1-l { bottom: -1rem; }
.left--1-l { left: -1rem; }
.top--2-l { top: -2rem; }
.right--2-l { right: -2rem; }
.bottom--2-l { bottom: -2rem; }
.left--2-l { left: -2rem; }
.absolute--fill-l {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}