Демонстрация относительного позиционирования

by webref

HTML

<div>
  <code>&#60;div&#62;</code>
</div>

<div class="offset">
  <code>&#60;div class= <br> "offset"&#62;</code>
</div>

<div>
  <code>&#60;div&#62;</code>
</div>

CSS

code {
  color: #666;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
}
div,
.offset code {
  border-radius: 6px;
}
div {
  background: #eaeaed;
  height: 62px;
  padding-top: 38px;
  text-align: center;
  width: 100px;
}
.offset {
  background: none;
  border: 2px dashed #9799a7;
  height: 100px;
  padding: 0;
}
.offset code {
  background: #2db34a;
  color: #fff;
  display: block;
  height: 74px;
  left: 20px;
  padding-top: 26px;
  position: relative;
  text-align: center;
  top: 20px;
  width: 100px;
}