Add basic property-value utils for position

This commit is contained in:
Mark Otto 2017-08-07 22:36:57 -07:00 committed by Mark Otto
parent 35f80bb12e
commit 3fbdedbf22
2 changed files with 22 additions and 1 deletions

View File

@ -6,6 +6,18 @@ group: utilities
toc: true 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 ## 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. 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.

View File

@ -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 { .fixed-top {
position: fixed; position: fixed;