| commit | author | age | ||
| 83c3f6 | 1 | --- |
| SP | 2 | layout: docs |
| 3 | title: Position | |
| 4 | description: Use these shorthand utilities for quickly configuring the position of an element. | |
| 5 | group: utilities | |
| 6 | toc: true | |
| 7 | --- | |
| 8 | ||
| 9 | ## Common values | |
| 10 | ||
| 11 | Quick positioning classes are available, though they are not responsive. | |
| 12 | ||
| 13 | {% highlight html %} | |
| 14 | <div class="position-static">...</div> | |
| 15 | <div class="position-relative">...</div> | |
| 16 | <div class="position-absolute">...</div> | |
| 17 | <div class="position-fixed">...</div> | |
| 18 | <div class="position-sticky">...</div> | |
| 19 | {% endhighlight %} | |
| 20 | ||
| 21 | ## Fixed top | |
| 22 | ||
| 23 | Position an element at the top of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. | |
| 24 | ||
| 25 | {% highlight html %} | |
| 26 | <div class="fixed-top">...</div> | |
| 27 | {% endhighlight %} | |
| 28 | ||
| 29 | ## Fixed bottom | |
| 30 | ||
| 31 | Position an element at the bottom of the viewport, from edge to edge. Be sure you understand the ramifications of fixed position in your project; you may need to add additional CSS. | |
| 32 | ||
| 33 | {% highlight html %} | |
| 34 | <div class="fixed-bottom">...</div> | |
| 35 | {% endhighlight %} | |
| 36 | ||
| 37 | ## Sticky top | |
| 38 | ||
| 39 | Position an element at the top of the viewport, from edge to edge, but only after you scroll past it. The `.sticky-top` utility uses CSS's `position: sticky`, which isn't fully supported in all browsers. | |
| 40 | ||
| 41 | **IE11 and IE10 will render `position: sticky` as `position: relative`.** As such, we wrap the styles in a `@supports` query, limiting the stickiness to only browsers that can render it properly. | |
| 42 | ||
| 43 | {% highlight html %} | |
| 44 | <div class="sticky-top">...</div> | |
| 45 | {% endhighlight %} | |
