Differences

This shows you the differences between two versions of the page.

--- css:position:absolute_vs_relative_vs_static [2021/08/08 12:27] – peter
+++ css:position:absolute_vs_relative_vs_static [2021/08/08 13:04] (current) – peter
@@ Line 9: / Line 9: @@
  <div class=”box” id=”three”>Three</div>
  <div class=”box” id=”four”>Four</div>
+</div>
 </file>
@@ Line 45: / Line 46: @@
 <WRAP info>
-**NOTE:**  Move the green box relative to its current position to 20px from the left and top without changing the layout around it.
+**NOTE:**  Relative Position places an element relative to its current position.
+  * Moves the green box relative to its current position to 20px from the left and top without changing the layout around it.
   * Thus, leaving a gap for the green box where it would have been had it not been position
@@ Line 67: / Line 69: @@
 <WRAP info>
-**NOTE:**  Absolute Position will not leave any gap where it would have been.
+**NOTE:**  Absolute Position has the offset relative to the parent.
+  * It will not leave any gap where it would have been.
   * The position of the Green Box is based on its parent position (the dotted border).
   * Thus, moving 20px to the left and bottom from the top-left origin of the dotted border.
 </WRAP>