Absolute position

Put a caption at the bottom of a section or div.

by Mindy McAdams

HTML

<section>
  <p>Hello. Note that the containing element MUST ALSO have <code>position: relative;</code> in the CSS. This configuration will work with a DIV element instead of a SECTION as the containing element.</p>
  <p class="caption">I am a caption.</p>
</section>

CSS

section {
  height: 300px;
  background: #ccc;
  position: relative;
}

.caption {
  position: absolute;
  bottom: 10px;
  right: 20px;
  background: #fff;
}

code {
  padding: 2px;
  background: #ffc;
}