Extra position utilities (#31280)

* Extra position utilities

Given that there are utilities for the *position* property, it seems logic to have utilities for the *top*, *left*, *bottom* and *right* propertires.

* Update extra position utilities

* add default position values map

* tweak examples

* add real life examples

* fix double colon

Co-authored-by: XhmikosR <xhmikosr@gmail.com>

site/assets/scss/_component-examples.scss

@@ -217,6 +217,29 @@
   }
 }
 
+.bd-example-position-utils {
+  position: relative;
+  padding: 3em;
+
+  .position-relative {
+    height: 200px;
+    background-color: #f5f5f5;
+  }
+
+  .position-absolute {
+    width: 2em;
+    height: 2em;
+    background-color: $dark;
+    @include border-radius();
+  }
+}
+
+.bd-example-position-examples {
+  &::after {
+    content: none;
+  }
+}
+
 //
 // Code snippets
 //