Positioning

File location: sass/layout/sass/layout/helpers/_adjustment.scss (GitHub)

Push and pull

Push and pull classes can be used to fine tune the position of HTML elements. We use two methods:

push and pull
translate-push and translate-pull

Push/pull will influence sibling element(s), while translate-push/-pull will move the element independently of its surroundings. Translate-push/pull requires that the element is a block level element. If it's not already a block level element, add .block or .inline-block to it. Translate-push/pull is very useful for pixel perfect positioning of – for example – icons (svg/png), relative to other page elements.

Class Name	Comment
`.push1v` ... `.push40v`	Push 1-40px vertically (down)
`.pull1v` ... `.pull40v`	Pull 1-40px vertically (up)
`.push1h` ... `.push40h`	Push 1-40px horizontally (right)
`.pull1h` ... `.pull40h`	Pull 1-40px horizontally (left)
`.translate-push1v` ... `.translate-push40v`	Move 1-40px down
`.translate-pull1v` ... `.translate-pull40v`	Move 1-40px up
`.translate-push1h` ... `.translate-push40h`	Move 1-40px right
`.translate-pull1h` ... `.translate-pull40h`	Move 1-40px left

Push down ↓

Normal

.push40v

Pull up ↑

Normal

.pull20v

Push right →

Normal

.push20h

Pull left ←

Normal

.pull20h

Positions

Class Name	CSS Properties
`.static`	position: static;
`.absolute`	position: absolute;
`.fixed`	position: fixed;
`.relative`	position: relative;
`.sticky`	position: sticky;
`.position-initial`	position: initial;
`.position-inherit`	position: inherit;
`.absolute-center`	left: 50%; position: absolute; top: 50%; transform: translate(-50%, -50%);

Alignment of Positioned Elements

For use together with one of the position utilities in the list above.

Class Name	CSS Properties	Comment
`.pos-spread`	top: 0; right: 0; bottom: 0; left: 0;	Full viewport overlay
`.pos-fill-v`	top: 0; bottom: 0;	Fill up viewport vertically
`.pos-fill-h`	left: 0; right: 0;	Fill up viewport horizontally
`.pos-top-0`	top: 0;	Relative to top of element or viewport
`.pos-bottom-0`	bottom: 0;	Relative to bottom of element or viewport
`.pos-left-0`	left: 0;	Relative to left side of element or viewport
`.pos-right-0`	right: 0;	Relative to right side of element or viewport

Z-Index

z-index indicates the stacking order of positioned elements. With these utility classes you can stack elements in layers, relative to each other, after first applying a position. Non-positioned elements won't be affected.

  <header "class="sticky pos-top-0 z-index-4">
  <!-- 
    This element will be visible above elements with lower or no z-index 
    applied, and stick to the top of the window when the page is scrolled.
  -->
</header>

Class Name	CSS Property
`.z-index-1`	z-index: 1;
`.z-index-2`	z-index: 2;
`.z-index-3`	z-index: 3;
`etc.`	...
`.z-index-18`	z-index: 18;
`.z-index-19`	z-index: 19;
`.z-index-20`	z-index: 20;
`.z-index-999`	z-index: 999;
`.z-index-unset`	z-index: unset;

Floats

Class Name	CSS Property
`.fr`	float: right;
`.fl`	float: left;
`.fn`	float: none;

Clears

Class Name	CSS Properties
`.clear-left`	clear: left;
`.clear-right`	clear: right;
`.clear-both`	clear: both;
`.clearfix`	:after { clear: both; content: ' '; display: table; }
`.clear-none`	clear: none;

Object-Fit

Specifies how an external object such as an image should be fitted within its container. Refer to this MDN page for further documentation.

Class Name	CSS Property
`.fill`	object-fit: fill;
`.contain`	object-fit: contain;
`.cover`	object-fit: cover;
`.scale-down`	object-fit: scale-down;
`.object-fit-none`	object-fit: none;

Vertical-Align

Determines how content within inline, inline-block and table-cell elements should be vertically positioned. The hgrid default value is align-baseline, as set in _base.scss. Refer to MDN for examples.

Class Name	CSS Property
`.align-top`	vertical-align: top;
`.align-middle`	vertical-align: middle;
`.align-bottom`	vertical-align: bottom;
`.align-text-top`	vertical-align: text-top;
`.align-text-bottom`	vertical-align: text-bottom;
`.align-baseline`	vertical-align: baseline;

← Previous: Tables

Next: Padding →