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]

diff --git a/docs/components/utilities.md b/docs/components/utilities.md
index 96c84b961f958cbf2b2efda6b39295c6a92cd98e..76bf5f9bedef8196433aec49bb6fea0094ba9d50 100644 (file)
--- 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.