Tachyons

Docs

/

Layout

/

Position

Version
<%= moduleVersion %>
Filesize
<%= moduleSize %>
Declarations
<%= moduleObj.declarations.total %>
Selectors
<%= moduleObj.selectors.total %>
Max. Specificity Score
<%= moduleObj.selectors.specificity.max %>
Size of Avg. Rule
<%= moduleObj.rules.size.average %>

Elements default to a position of static. Tachyons provides utilities 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 fixed and sticky options for position but as I don't find them useful from a design standpoint I have not included them here. If you do find them useful you could easily extend the position module to include these options. 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. I don't provide negative values - but those can be used in both relative and absolutely positioned elements.

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.

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.

Previous

Heights

Next

Hovers
src/_position.css

<%= srcCSS %>

src/_coordinates.css


/* 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; }
}

<%= navDocs %>
<%= siteFooter %>