src/scss/bootstrap-4.0.0-alpha.6/docs/utilities/position.md

   1 ---
   2 layout: docs
   3 title: Position
   4 group: utilities
   5 ---
   6
   7 Position utilities are helpful for quickly placing a component outside the normal document flow. Choose from a handful of fixed or sticky position classes as needed.
   8
   9 ### Fixed top
  10
  11 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.
  12
  13 {% highlight html %}
  14 <div class="fixed-top">...</div>
  15 {% endhighlight %}
  16
  17 ### Fixed bottom
  18
  19 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 aditional CSS.
  20
  21 {% highlight html %}
  22 <div class="fixed-bottom">...</div>
  23 {% endhighlight %}
  24
  25 ### Sticky top
  26
  27 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.
  28
  29 {% highlight html %}
  30 <div class="sticky-top">...</div>
  31 {% endhighlight %}