diff --git a/docs/source/styles/positioning.blade.md b/docs/source/styles/positioning.blade.md index 2ba6275e1..fb44b78f9 100644 --- a/docs/source/styles/positioning.blade.md +++ b/docs/source/styles/positioning.blade.md @@ -150,13 +150,14 @@ Offsets are calculated relative to the viewport and the element *will* act as a @slot('code') -
+
Fixed child
Absolute child
+ Scroll me! Lorem ipsum... @@ -164,6 +165,110 @@ Offsets are calculated relative to the viewport and the element *will* act as a @endslot @endcomponent +### Pinning edges + +Use the `.pin{-edge?}` utilities to anchor absolutely positioned elements against any of the edges of the nearest positioned parent. + +Combined with Tailwind's [padding utilities](#), you'll probably find that these are all you need to precisely control absolutely positioned elements. + +
+
+
Class
+
pin
+
+
+
Edge (optional)
+
  All (default)
+
t Top
+
r Right
+
b Bottom
+
l Left
+
y Top and Bottom
+
x Left and Right
+
+
+ +@component('_partials.code-sample') +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +@slot('code') + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+ + +
+
+
+@endslot +@endcomponent ## Responsive