Skip to content

Commit

Permalink
Add basic property-value utils for position
Browse files Browse the repository at this point in the history
  • Loading branch information
mdo committed Aug 11, 2017
1 parent 35f80bb commit 3fbdedb
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 1 deletion.
12 changes: 12 additions & 0 deletions docs/4.0/utilities/position.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
11 changes: 10 additions & 1 deletion scss/utilities/_position.scss
Original file line number Diff line number Diff line change
@@ -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;
Expand Down

0 comments on commit 3fbdedb

Please sign in to comment.