[CSS] position:absolute;の指定で要素を重ねる

要素に要素を重ねたい

親要素に子要素を重ねたい場合、CSSで子要素にposition:absolute;の指定をします。
position:absolute;は、要素の位置の絶対配置を意味しています。
要素の位置は top, right, bottom, left の値で指定します。

親要素には、position:relative;を指定します。
親要素に、positionの指定が無い場合、子要素の位置の起点はブラウザ全体の左上になってしまいます。

index.html

<div class="parent_element">
  <span class="child_element">子要素を重ねる</span>
</div>

stylesheet.css

.parent_element {
  height: 150px;
  width: 300px;
  background-color: #02ccba;
  position: relative;
}

.child_element {
  color: white;
  position: absolute;
  top: 25px;
  left: 25px;
}

この例は、以下のように表示されます。