.red {
  background-color: red;
}

.blue {
  background-color: blue;
}

.green {
  background-color: green;
}

.rect {
  width: 250px;
  height: 100px;
}

.relative {
  position: relative;
  left: 50px;
  top: -25px;
}

.include {
  width: 200px;
  height: 180px;
}

.an-absolute {
  width: 200px;
  height: 200px;
  background-color: yellow;
  position: absolute;
  right: 200px;
  top: 300px;
}

.absolute {
  position: absolute;
  right: 50px;
  top: 30px;
}

.fixed {
  position: fixed;
  top: 400px;
  left: 200px;
}

.sticky {
  position: sticky;
  top: 400px;
  left: 400px;
}

.left-offsets {
  position: fixed;
  top: 0;
  right: 0;
  left: auto;
  width: 50px;
  height: 100%;
  background-color: deepskyblue;
}

.outer {
  position: relative;
  width: 500px;
  height: 500px;
  border: 20px solid yellow;
  /*padding: 20px;  */
  margin: 0 auto;
}

.inner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  background-color: red;
  transform: translate(-50%, -50%);
}