From dd480cf56aebe7bf121216041bbfd4d32fa1ad28 Mon Sep 17 00:00:00 2001
From: Jonathan Reinink <jonathan@reinink.ca>
Date: Thu, 3 Aug 2017 07:59:40 -0400
Subject: [PATCH] Add position documentation.

---
 docs/source/position.blade.php | 38 ++++++++++++++++++++++++++++++++++
 1 file changed, 38 insertions(+)

diff --git a/docs/source/position.blade.php b/docs/source/position.blade.php
index 41df464f8..d607b1237 100644
--- a/docs/source/position.blade.php
+++ b/docs/source/position.blade.php
@@ -4,4 +4,42 @@
 
 <h1 class="title">Position</h1>
 
+<p class="mt-6 mb-3 text-dark-soft">The position utilities are primarily <code>position</code> display property helpers.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="fixed"></div>
+<div class="absolute"></div>
+<div class="relative"></div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .fixed;
+  .absolute;
+  .relative;
+}</code></pre>
+
+<h2 class="subtitle">Pinning absolute content</h2>
+
+<p class="mt-6 mb-3">Tailwind also provides pin utilties, useful for "pinning" absolutely positioned elements using the <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> properties.</p>
+
+<p class="mt-6 mb-3">Using the utilities in HTML:</p>
+
+<pre class="language-html"><code>{{ '<div class="relative">
+    <div class="absolute pin-t"></div>
+</div>' }}</code></pre>
+
+<p class="mt-6 mb-3">Using the utilities in Less:</p>
+
+<pre class="language-less"><code>div {
+  .pin-t
+  .pin-r
+  .pin-b
+  .pin-l
+  .pin-y
+  .pin-x
+  .pin
+}</code></pre>
+
 @endsection