From e91c9e2898953208084e1eebdbdef978a7a1f206 Mon Sep 17 00:00:00 2001 From: Russell Beye Date: Thu, 7 Jan 2016 22:34:13 -0600 Subject: [PATCH] Document .pos-f-t utility class; fixes #18494 Add documentation to components/utilities to publicly expose the .pos-f-t utility class to users. Closes #18799 [skip sauce] --- docs/components/utilities.md | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/docs/components/utilities.md b/docs/components/utilities.md index 96c84b961f..76bf5f9bed 100644 --- a/docs/components/utilities.md +++ b/docs/components/utilities.md @@ -229,6 +229,20 @@ Easily clear `float`s by adding `.clearfix` **to the parent element**. Utilizes } {% endhighlight %} +## Fixed positioning + +The `.pos-f-t` class can be used to easily position elements at the top of the viewport and make them as wide as the viewport. **Be sure you understand the ramifications of fixed-position elements within your project.** Here's how the class is defined: + +{% highlight scss %} +.pos-f-t { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: $zindex-navbar-fixed; +} +{% endhighlight %} + ## Invisible content The `.invisible` class can be used to toggle only the visibility of an element, meaning its `display` is not modified and the element can still affect the flow of the document.