CSS

position absoluteの配置図【CSS】

概要

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

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

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

position absoluteの配置図

親要素

positionはrelative

absoluteはpositionにstatic以外を指定する必要あり

absoluteの親要素として、位置設定の基準値になる

この要素のpaddingは0

border 1px

top 0

bottom 0

right 0

left 0

top0 right 0

bottom0 right 0

重なり部分あり。←ここは多分「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;
  }
  1. absoluteは親要素のpositionにstatic以外を指定する必要がある
  2. absoluteを指定した要素にtop、bottomの高さを指定しないと、要素の外に配置される

親要素2

positionはrelative

この要素のpaddingは2rem

border 1px

min-height 500px

top 0

bottom 0

top0 right 0

bottom0 right 0

top50% left 0

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

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

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

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

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

  1. 親要素にpaddingを設定すると、子要素はそのpaddingに影響を受けることがある
  2. absolute要素にて、位置をしていない方向のpaddingの影響を受け、場所が変わる
  3. 位置で0を指定すれば、その方向のpaddingは無視できる
  .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;
  }

タイトルとURLをコピーしました