[ipfire.org.git] / src / scss / bootstrap-4.0.0-alpha.6 / docs / utilities / position.md

---
layout: docs
title: Position
group: utilities
---

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.

### 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.

{% highlight html %}
<div class="fixed-top">...</div>
{% endhighlight %}

### Fixed bottom

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.

{% highlight html %}
<div class="fixed-bottom">...</div>
{% endhighlight %}

### Sticky top

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.

{% highlight html %}
<div class="sticky-top">...</div>
{% endhighlight %}
Commit	Line	Data
91e44d91 S	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 %}