diff options
| -rw-r--r-- | docs/4.0/utilities/position.md | 12 | ||||
| -rw-r--r-- | scss/utilities/_position.scss | 11 |
2 files changed, 22 insertions, 1 deletions
diff --git a/docs/4.0/utilities/position.md b/docs/4.0/utilities/position.md index fb7d8bd9e..9cf952452 100644 --- a/docs/4.0/utilities/position.md +++ b/docs/4.0/utilities/position.md @@ -6,6 +6,18 @@ group: utilities toc: true --- +## Common values + +Quick positioning classes are available, though they are not responsive. + +{% highlight html %} +<div class="position-static">...</div> +<div class="position-relative">...</div> +<div class="position-absolute">...</div> +<div class="position-fixed">...</div> +<div class="position-sticky">...</div> +{% endhighlight %} + ## Fixed top 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 aditional CSS. diff --git a/scss/utilities/_position.scss b/scss/utilities/_position.scss index 74b8d39e7..bddae2151 100644 --- a/scss/utilities/_position.scss +++ b/scss/utilities/_position.scss @@ -1,4 +1,13 @@ -// Positioning +// Common values + +// Sass list not in variables since it's not intended for customization. +$positions: static, relative, absolute, fixed, sticky; + +@each $position in $positions { + .position-#{$position} { position: $position !important; } +} + +// Shorthand .fixed-top { position: fixed; |