position absoluteの配置図【CSS】

概要

position:absoluteって、いろんなデザインを追加していくと、なんだかよくわからなくなるんですよね。

自分が意図した場所じゃないところに要素が飛んでいってしまうことも良くあります。

基本に立ち返って、余計な余白とかない状態の、単純な配置図を自分用に作っておきたい、というのが目的な記事です。

position absoluteの配置図

重なり部分あり。←ここは多分「left:0」の要素と被っている。

高さ指定せずに、left 0だけ指定すると、親要素の外に出て、他の要素と重なります。

わかりやすくするために、ワードプレスの既定のmargin、padding以外は設定しない形にしています。

親要素のborderには重なりません。

  .oya {
    position: relative;
    background-color: #fff;
    border: 1px solid #333;
    padding: 0;
    text-align:center;
  }
  .naka-top0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #1000ff;
    border-radius: 0.25rem;
    top:0;
  }
  .naka-bottom0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #ff00d9;
    border-radius: 0.25rem;
    bottom:0;
  }
  .naka-right0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #006719;
    border-radius: 0.25rem;
    right:0;
  }
  .naka-left0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #805000;
    border-radius: 0.25rem;
    left:0;
  }
  .naka-top0-right0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #805000;
    border-radius: 0.25rem;
    top:0;
    right:0;
  }
  .naka-bottom0-right0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #805000;
    border-radius: 0.25rem;
    bottom:0;
    right:0;
  }

親要素にpaddingを設定した場合です。

位置指定をしていない場所のpaddingは影響を受けます。

例えばですが、top 0だけを指定していると、親要素の左paddingの影響を受けます。left 0を指定すると、左によります。

親要素にpaddingを設定している場合に、はじに寄せたい場合は、その方向の0を指定する必要があります。

また、親要素内の文字が少なくなっているので、高さの最低サイズを指定しています。

  .oya2 {
    position: relative;
    background-color: #fff;
    border: 1px solid #333;
    padding: 2rem;
    text-align:center;
    min-height:500px;
  }
  .naka-top50-left0{
    position: absolute;
    background-color: #fff;
    border: 1px solid #805000;
    border-radius: 0.25rem;
    top:50%;
    left:0;
  }