Differences

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

--- css:position:absolute_vs_relative_vs_static [2021/08/08 12:03] – peter
+++ css:position:absolute_vs_relative_vs_static [2021/08/08 13:04] (current) – peter
@@ Line 1: / Line 1: @@
 ====== CSS - Position - Absolute vs Relative vs Static ======
-===== index.html =====
+===== CSS - Position - Static =====
-<code html>
+<file index.html>
 <div class=”parent”>
  <div class=”box” id=”one”>One</div>
@@ Line 10: / Line 10: @@
  <div class=”box” id=”four”>Four</div>
 </div>
-</code>
+</file>
-==== style.css ====
+<file style.css>
-<code css>
 .parent {
  border: 2px black dotted;
  display: inline-block;
-}.box {
+}
+.box {
  display: inline-block;
  background: red;
  width: 100px;
  height: 100px;
-}#two {
+}
+#two {
   background: green;
 }
-</code>
+</file>
-<html>
-.parent {
+{{:css:position:css_-_position_-_static.png?600|}}
- border: 2px black dotted;
- display: inline-block;
+----
-}.box {
- display: inline-block;
+===== CSS - Position - Relative =====
- background: red;
- width: 100px;
+<file style.css>
- height: 100px;
+#two {
-}#two {
+  top: 20px;
+  bottom: 20px;
   background: green;
+  position: relative;
 }
+</file>
-<div class=”parent”>
+{{:css:position:css_-_position_-_relative.png?600|}}
- <div class=”box” id=”one”>One</div>
- <div class=”box” id=”two”>Two</div>
+<WRAP info>
- <div class=”box” id=”three”>Three</div>
+**NOTE:**  Relative Position places an element relative to its current position.
- <div class=”box” id=”four”>Four</div>
-</div>
+  * Moves the green box relative to its current position to 20px from the left and top without changing the layout around it.
-</html>
+  * Thus, leaving a gap for the green box where it would have been had it not been position
+</WRAP>
+----
+===== CSS - Position - Absolute =====
+<file style.css>
+#two {
+  top: 20px;
+  bottom: 20px;
+  background: green;
+  position: absolute;
+}
+</file>
+{{:css:position:css_-_position_-_absolute.png?600|}}
+<WRAP info>
+**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>