CSS Positioning

Static positioning

demo/static.html:

#two {
  background-color: #eee;
  position: static;
}

Relative positioning

top, bottom, left, and right

demo/relative.html:

#two {
  background-color: #eee;
  position: relative;
  top: 5.8vw;
  left: 5.8vw;
}

z-index

demo/z-index.html:

#two {
  background-color: #eee;
  position: relative;
  top: 5.8vw;
  left: 5.8vw;
  z-index: -1;
}

#three {
  z-index: -2;
}

Absolute positioning

demo/absolute.html:

#two {
  background-color: #eee;
  position: absolute;
  top: 5.8vw;
  left: 5.8vw;
}

Positioning contexts (Closest positioned)

demo/static-absolute.html:

<div class="static parent">
  <div class="absolute child"></div>
</div>

.static {
  position: static;
}

.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

demo/rel-absolute.html:

<div class="relative parent">
  <div class="absolute child"></div>
</div>

.relative {
  position: relative;
  top: 20px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

demo/rel-rel-absolute.html:

<div class="relative grandparent">
  <div class="relative parent">
    <div class="absolute child"></div>
  </div>
</div>

.relative {
  position: relative;
  top: 20px;
  left: 20px;
}

.absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

Fixed positioning

demo/fixed.html:

#two {
  background-color: #eee;
  position: fixed;
  top: 5.8vw;
  left: 5.8vw;
}

Sticky positioning

demo/sticky.html:

dt {
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

Stretch a Box

Absolute inside Absolute, with Fixed Dimensions

demo/static-static-fixed-height.html:

<div class="parent">
  <div class="child"></div>
</div>

.parent {
  position: static;
  width: 200px;
  border: 3px solid #000;
}

.child {
  position: static;
  width: 100px;
  height: 100px;
  background-color: blue;
}

Absolute Inside Relative, with Fixed Dimensions

demo/rel-absolute-fixed-heigh.html:

.parent {
  position: relative;
  width: 200px;
  border: 3px solid #000;
}

.child {
  position: absolute;
  width: 100px;
  height: 100px;
  background-color: blue;
}

Absolute Inside Relative Without a Specific Height

demo/rel-absolute-strech-height.html:

.parent {
  position: relative;
  width: 200px;
  height: 100px;
  border: 3px solid #000;
}

.child {
  position: absolute;
  width: 100px;
  top: 0px;
  bottom: 0px;
  background-color: blue;
}

Float

demo/float.html

img {
  float: right;
}

References