feat(position): add left/top/right/bottom-0 utility classes

packages/docs/src/data/nav.json

@@ -68,6 +68,7 @@
       "flex",
       "float",
       "overflow",
+      "position",
       "sizing",
       "spacing",
       "text-and-typography"

packages/docs/src/examples/position/absolute.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="text-caption px-4 mb-2">With static child</div>
+
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg mx-2 mb-2">
+    <div class="mb-2">Relative parent</div>
+
+    <div class="bg-surface-light position-static pa-3">
+      <div class="mb-2">Static parent</div>
+
+      <div class="position-static bg-primary rounded-lg pa-3 d-inline-block me-2">
+        Static child
+      </div>
+
+      <div class="position-static bg-blue rounded-lg pa-3 d-inline-block">
+        Static sibling
+      </div>
+    </div>
+  </div>
+
+  <div class="text-caption px-4 mb-2">With absolute child</div>
+
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg mx-2 mb-2">
+    <div class="mb-2">Relative parent</div>
+
+    <div class="bg-surface-light position-static pa-3">
+      <div class="mb-3">Static parent</div>
+
+      <div class="position-absolute top-0 right-0 bg-primary rounded-lg pa-3 d-inline-block">
+        Absolute child
+      </div>
+
+      <div class="position-static bg-blue rounded-lg pa-3 d-inline-block">
+        Static sibling
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/src/examples/position/fixed.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg ma-2">
+    <div class="bg-surface-light position-relative py-3 ps-3">
+      <!-- position-absolute used for demonstration purposes -->
+      <div class="position-absolute top-0 left-0 right-0 bg-primary pa-3 w-100">
+        Fixed child
+      </div>
+
+      <div class="overflow-y-auto pe-3" style="max-height: 250px">
+        <div class="mt-12">Relative parent</div>
+
+        <div
+          v-for="n in 10"
+          :key="n"
+          class="bg-info rounded-lg pa-3 mt-2"
+        >
+          Static child
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/src/examples/position/relative.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg ma-2">
+    <div class="bg-surface-light position-relative pa-3 pb-16">
+      <div class="mb-2">Relative parent</div>
+
+      <div class="position-absolute bottom-0 right-0 bg-primary rounded-lg pa-3">
+        Absolute child
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/src/examples/position/static.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg ma-2">
+    <div class="bg-surface-light position-static pa-3 pb-16">
+      <div class="mb-2">Static parent</div>
+
+      <div class="position-absolute bottom-0 right-0 bg-primary rounded-lg pa-3">
+        Absolute child
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/src/examples/position/sticky.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="bg-surface-variant pa-4 position-relative rounded-lg ma-2">
+    <div class="bg-surface-light position-relative py-3 ps-3">
+      <div class="overflow-y-auto pe-3" style="max-height: 250px">
+        <div>Relative parent</div>
+
+        <div
+          v-for="n in 5"
+          :key="n"
+        >
+          <div class="bg-primary position-sticky top-0 pa-3 mt-2">
+            Sticky header {{ n }}
+          </div>
+
+          <div
+            v-for="k in 8"
+            :key="k"
+            class="bg-info rounded-lg pa-3 mt-2"
+          >
+            Static child
+          </div>
+
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/docs/src/pages/en/styles/position.md

@@ -0,0 +1,65 @@
+---
+emphasized: true
+meta:
+  title: Position
+  description: Use position utilities to quickly style the positioning of any element.
+  keywords: position classes, positioning utilities, vuetify position helper classes
+related:
+  - /styles/display/
+  - /styles/spacing/
+  - /styles/flex/
+---
+
+# Position
+
+Utilities for controlling the positioning of elements in your application.
+
+<page-features />
+
+| Class | Properties |
+| - | - |
+| **position-static** | position: static; |
+| **position-relative** | position: relative; |
+| **position-absolute** | position: absolute; |
+| **position-fixed** | position: fixed; |
+| **position-sticky** | position: sticky; |
+| **top-0** | top: 0; |
+| **right-0** | right: 0; |
+| **bottom-0** | bottom: 0; |
+| **left-0** | left: 0; |
+
+<entry />
+
+## Usage
+
+The `position` utilities allow you to quickly style the positioning of any element. These classes can be used to apply the `position` and `top`, `right`, `bottom`, and `left` properties to an element.
+
+### Static
+
+The default position value for all elements is `static`. This means that the element is positioned according to the normal flow of the document. The `top`, `right`, `bottom`, `left` properties have no effect on a statically positioned element.
+
+<example file="position/static" />
+
+### Relative
+
+The `position-relative` class allows you to position an element relative to its normal position in the document. This means that the `top`, `right`, `bottom`, and `left` properties can be used to move the element from its normal position.
+
+<example file="position/relative" />
+
+### Absolute
+
+The `position-absolute` class allows you to position an element relative to its closest positioned ancestor. If no positioned ancestor is found, the element is positioned relative to the document body.
+
+<example file="position/absolute" />
+
+### Fixed
+
+The `position-fixed` class allows you to position an element relative to the viewport. This means that the element will stay in the same position even when the page is scrolled.
+
+<example file="position/fixed" />
+
+### Sticky
+
+The `position-sticky` class allows you to position an element based on the user's scroll position. The element is treated as `relative` until it crosses a specified threshold, at which point it is treated as `fixed`.
+
+<example file="position/sticky" />

packages/vuetify/src/styles/settings/_utilities.scss

@@ -532,6 +532,26 @@ $utilities: () !default;
         class: position,
         values: static relative fixed absolute sticky
       ),
+      "top": (
+        property: top,
+        class: top,
+        values: 0
+      ),
+      "right": (
+        property: right,
+        class: right,
+        values: 0
+      ),
+      "bottom": (
+        property: bottom,
+        class: bottom,
+        values: 0
+      ),
+      "left": (
+        property: left,
+        class: left,
+        values: 0
+      ),
       // Cursor
       "cursor": (
         property: cursor,