The Story of Position Absolute

index.html

<div class="row center-block">
  <div id="left-box" class="col-sm-6 left">
    <div id="left-top-box">
      Left-Top-Box
      <p class="caption">aaaa</p>
    </div>
    <div id="left-bottom-box">
      Left-Bottom-Box
      <p class="caption">bbbb</p>
    </div>
  </div>
  
  <div id="right-box" class="col-sm-6 right">
    Right-Box
    <p class="caption">ccccc</p>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

div.left > div {
  height: 120px;

  /* position: absolute な子要素の起点にする */ 
  position: relative;
}

/* absolute で配置したいもの */
p.caption {
  position: absolute;
  top: 25px;
  left: 50px;
}


/* 以下は視認性を上げる処理なので気にしなくてよい  */
div {
  background-color: #e3e0cf;
  border: solid 4px #c5d5cb;
}
div > div { 
  border: solid 4px #9fa8a3;
  background-color: #d3e0df;
}
div > div > div {
  border: solid 4px #7f9893;
  background-color: #f3f0ef;
}

div > div > div:nth-child(even) { 
  background-color: #f0f0e0;
}

div.row {
  margin-top: 4em;
  width: 95%;
}

p.caption {
  font-size: 20px;
  font-weight: 900;
}

#right-box {
  height: 240px;
}

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

The Story of Position Absolute.markdown

The Story of Position Absolute

A Pen by TOBY on CodePen.

License.