CSS positioning: relative, absolute, fixed, static

Examples from https://www.w3schools.com/css/css_positioning.asp combined in one page for comparison and contrast.

by Sheryl Hohman

HTML

-------------------------
<h2>position: static</h2>

<p>An element with position: static; is positioned in its normal position:</p>

<div class="static">
This div element has position: static
</div>
---------------------------
<h2>position: relative</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div class="relative">
This div element has position: relative
</div>
---------------------------
<h2>position: fixed</h2>

<p>An element with position: fixed <br />
is positioned relative to the <b>viewport</b>, which means <br />
it always stays in the same place, even if the page is scrolled:</p>

<div class="fixed">
This div element has position: fixed;
</div>
---------------------------
<h2>position: absolute</h2>
<h3>
Yes, I'm "absolutely" positioned <b>relative</b> to my <i>immediate ancestor</i> !
</h3>

<p>An element with <strong>position: absolute</strong>
is positioned <strong><i>relative</i></strong> to the <strong>nearest positioned ancestor</strong> <br />
(instead of positioned relative to the viewport, as "fixed" would be):</p>
<br />

<div class="relative-with-absolute">This div element has position: relative
  <div class="absolute">This div element has position: absolute
  <p>
  Yes, I'm <b>"absolutely"</b> sure I'm <b>positioned</b> "<i>relative</i>" to my <i>immediate ancestor</i> !
  </p></div>
</div>

CSS

body {
    height: 120vh;
    border:1px dashed green; 
}    
div.static {
    position: relative;
    /*right: 30px;*/
    border: 3px solid #73AD21;
}
div.relative {
    position: relative;
    left: 30px;
    border: 3px solid #73AD21;
}
div.fixed {
    position: fixed;
    top: 10px;
    right: 0;
    width: 300px;
    border: 3px solid #73AD21;
}

div.relative-with-absolute {
    position: relative;
    width: 400px;
    height: 200px;
    border: 3px solid green;
} 
div.absolute {
    position: absolute;
    top: 80px;
    right: 0;
    width: 200px;
    height: 110px;
    border: 3px solid #73AD21;
}