Tweak visual styles on position examples

Author: Lachlan Campbell

docs/layout/position/index.html

@@ -113,18 +113,16 @@ <h3 class="f5 book pt4 caps">Position Relative</h3>
           </p>
         </div>
         <h3 class="f5 book pt4 caps">Position Relative + Absolute</h3>
-        <div class="relative bg-black-10 h5 mbm">
-          <div class="absolute top-1 left-1 right-2 bottom-2 white bg-dark-gray">
-          <p class="measure pam">
-            This is an absolutely positioned element set to have offsets of top and left to 1rem with right and bottom offset by 2rem. It's parent with the light gray background is set to position relative.
+        <div class="relative bg-black-10 h5 mbm br2">
+          <div class="absolute top-1 left-1 right-2 bottom-2 white bg-black-50 br2">
+            <p class="measure lh-copy ph3">
+              This is an absolutely positioned element set to have offsets of top and left to 1rem with right and bottom offset by 2rem. It's parent with the light gray background is set to position relative.
             </p>
           </div>
         </div>
-        <div class="relative bg-black-10 h5 mbm">
-          <div class="absolute top-0 right-0 white bg-dark-gray w2 pvs tc">
-            X
-          </div>
-          <p class="measure pal">
+        <div class="relative bg-black-10 h5 mbm br2">
+          <span class="absolute top-0 right-0 ma2 white bg-black-50 pa2 tc br2">X</span>
+          <p class="measure lh-copy pa3">
             This illustrates an absolutely positioned element that might always need to be in the top right of the content like a close button for a modal that needs to be dismissed.
           </p>
         </div>

src/templates/docs/position/index.html

@@ -77,18 +77,16 @@ <h3 class="f5 book pt4 caps">Position Relative</h3>
           </p>
         </div>
         <h3 class="f5 book pt4 caps">Position Relative + Absolute</h3>
-        <div class="relative bg-black-10 h5 mbm">
-          <div class="absolute top-1 left-1 right-2 bottom-2 white bg-dark-gray">
-          <p class="measure pam">
-            This is an absolutely positioned element set to have offsets of top and left to 1rem with right and bottom offset by 2rem. It's parent with the light gray background is set to position relative.
+        <div class="relative bg-black-10 h5 mbm br2">
+          <div class="absolute top-1 left-1 right-2 bottom-2 white bg-black-50 br2">
+            <p class="measure lh-copy ph3">
+              This is an absolutely positioned element set to have offsets of top and left to 1rem with right and bottom offset by 2rem. It's parent with the light gray background is set to position relative.
             </p>
           </div>
         </div>
-        <div class="relative bg-black-10 h5 mbm">
-          <div class="absolute top-0 right-0 white bg-dark-gray w2 pvs tc">
-            X
-          </div>
-          <p class="measure pal">
+        <div class="relative bg-black-10 h5 mbm br2">
+          <span class="absolute top-0 right-0 ma2 white bg-black-50 pa2 tc br2">X</span>
+          <p class="measure lh-copy pa3">
             This illustrates an absolutely positioned element that might always need to be in the top right of the content like a close button for a modal that needs to be dismissed.
           </p>
         </div>