Position

Usage

Things can get complicated when trying to position elements with CSS, which is why we have created handy utility classes to help you along your way. For more information on the position property, head over to Free Code Camp.

Notation:

You can target the position class by using p-{breakpoint}-{property}. The breakpoint being optional and one of our five breakpoints, the properties being outlined below.
As mesh is mobile first, these classes affect the breakpoint and upwards, for example - p-tab-absolute will make the element's position absolute on tablet, desktop & HD screens.

Properties:

Class	Properties
.p-relative	position: relative;
.p-absolute	position: absolute;
.p-fixed	position: fixed;
.p-static	position: static;
.p-sticky	position: sticky;

Pinning

You can also use the pin classes to fix elements to the top, right, bottom & left of the container/parent, see below:

Class	Properties
.pin-t	top: 0;
.pin-r	right: 0;
.pin-b	bottom: 0;
.pin-l	left: 0;
.pin-y	top: 0; bottom: 0;
.pin-x	left: 0; right: 0;
.pin	top: 0; right: 0; bottom: 0; left: 0;
.pin-none	top: auto; right: auto; bottom: auto; left: auto;

Examples

Responsive position:

Here, the purple element, the third that sits in the DOM will be positioned absolutely from desktop widths and above, whilst being static at mobile and tablet.

<div class="element">element</div>
<div class="element">element</div>
<div class="p-desk-absolute">third-child</div>

Variations

<!-- Default -->
<div class="p-relative"></div>
<div class="p-absolute"></div>
<div class="p-fixed"></div>
<div class="p-static"></div>
<div class="p-sticky"></div>
<!-- Mobile -->
<div class="p-mob-relative"></div>
<div class="p-mob-absolute"></div>
<div class="p-mob-fixed"></div>
<div class="p-mob-static"></div>
<div class="p-mob-sticky"></div>
<!-- Tablet -->
<div class="p-tab-relative"></div>
<div class="p-tab-absolute"></div>
<div class="p-tab-fixed"></div>
<div class="p-tab-static"></div>
<div class="p-tab-sticky"></div>
<!-- Desktop -->
<div class="p-desk-relative"></div>
<div class="p-desk-absolute"></div>
<div class="p-desk-fixed"></div>
<div class="p-desk-static"></div>
<div class="p-desk-sticky"></div>
<!-- HD -->
<div class="p-hd-relative"></div>
<div class="p-hd-absolute"></div>
<div class="p-hd-fixed"></div>
<div class="p-hd-static"></div>
<div class="p-hd-sticky"></div>

Variables

Add or remove position classes from the map variable below.

Variable	Value	Description
`$position-properties: ( relative, absolute, fixed, static, sticky );`	Map(property)	To remove position paramters just delete from the map above, this will in turn delete the class and responsive class associated with the property, e.g. `p-mob-sticky`