Position

Overview

Use these shorthand utilities for quickly configuring the position of an element.

Relative

Use .position-relative to position an element according to the normal flow of the document.

Offsets are calculated relative to the element's normal position and the element will act as a position reference for absolutely positioned children.

Relative Element

Absolute

Use .position-absolute to position an element outside of the normal flow of the document, causing neighboring elements to act as if the element doesn't exist.

Offsets are calculated relative to the nearest parent that has a position other than static, and the element will act as a position reference for other absolutely positioned children.

Relative Parent

Absolute Child

Fixed

Use .position-fixed to position an element relative to the browser window.

Offsets are calculated relative to the viewport and the element will act as a position reference for absolutely positioned children.

Fixed Top

Use .fixed-top to position an element at the top of the viewport, from edge to edge.

Fixed Element Top

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non vehicula odio, sed euismod magna. Nullam iaculis rhoncus justo. Donec ullamcorper est odio, id porta augue fermentum non. Nulla eu nulla mollis, feugiat dui interdum, commodo nunc. Aenean quis lectus ullamcorper erat dictum vulputate ut in risus. Curabitur venenatis turpis diam, ac aliquet mi ultricies eu. Cras vestibulum tempus enim eget blandit. Sed ullamcorper finibus ligula in pellentesque. Proin velit libero, consequat sit amet commodo porttitor, fermentum at nisl. Fusce sed vulputate est. Aliquam eu nisi lectus. Proin eu ultricies velit. Nunc vel pharetra velit. Praesent in tempor mi.

In hendrerit rutrum vehicula. Donec ac gravida mi. Sed in rhoncus dolor, ut egestas odio. Nullam quis velit vitae massa interdum eleifend vel vitae nibh. Phasellus consectetur quis sapien id egestas. Maecenas commodo, massa a fringilla euismod, nulla lectus efficitur mauris, ut ultrices diam sapien ut ex. Integer eget odio eros. Curabitur efficitur dapibus faucibus. Proin ultricies nec massa ac feugiat. Quisque viverra ante facilisis ultricies pulvinar. Phasellus congue eros quis ligula egestas suscipit.

Duis laoreet eros at orci sodales tincidunt. Pellentesque pharetra, dui eu bibendum porta, est elit finibus massa, id aliquet tortor nunc non felis. Ut aliquet placerat pellentesque. Praesent imperdiet ex nec tellus sollicitudin sagittis. Sed faucibus eget ligula in rutrum. Etiam leo lorem, posuere ut imperdiet et, iaculis et enim. Sed ut elit tristique, pretium eros eu, semper urna. Phasellus metus arcu, posuere in dolor a, iaculis pretium lectus.

Fixed Bottom

Use .fixed-bottom to position an element at the bottom of the viewport, from edge to edge.

Fixed Element Bottom

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non vehicula odio, sed euismod magna. Nullam iaculis rhoncus justo. Donec ullamcorper est odio, id porta augue fermentum non. Nulla eu nulla mollis, feugiat dui interdum, commodo nunc. Aenean quis lectus ullamcorper erat dictum vulputate ut in risus. Curabitur venenatis turpis diam, ac aliquet mi ultricies eu. Cras vestibulum tempus enim eget blandit. Sed ullamcorper finibus ligula in pellentesque. Proin velit libero, consequat sit amet commodo porttitor, fermentum at nisl. Fusce sed vulputate est. Aliquam eu nisi lectus. Proin eu ultricies velit. Nunc vel pharetra velit. Praesent in tempor mi.

In hendrerit rutrum vehicula. Donec ac gravida mi. Sed in rhoncus dolor, ut egestas odio. Nullam quis velit vitae massa interdum eleifend vel vitae nibh. Phasellus consectetur quis sapien id egestas. Maecenas commodo, massa a fringilla euismod, nulla lectus efficitur mauris, ut ultrices diam sapien ut ex. Integer eget odio eros. Curabitur efficitur dapibus faucibus. Proin ultricies nec massa ac feugiat. Quisque viverra ante facilisis ultricies pulvinar. Phasellus congue eros quis ligula egestas suscipit.

Duis laoreet eros at orci sodales tincidunt. Pellentesque pharetra, dui eu bibendum porta, est elit finibus massa, id aliquet tortor nunc non felis. Ut aliquet placerat pellentesque. Praesent imperdiet ex nec tellus sollicitudin sagittis. Sed faucibus eget ligula in rutrum. Etiam leo lorem, posuere ut imperdiet et, iaculis et enim. Sed ut elit tristique, pretium eros eu, semper urna. Phasellus metus arcu, posuere in dolor a, iaculis pretium lectus.

Additional Classes

Class Name Description
.fixed-top Fixes an element at the top of the page.
.fixed-bottom Fixes an element at the bottom of the page.