ホーム(記事一覧)へ

CSSのpositionを使わない配置

positionを使うと位置を調整できますが、ずれたり、CSSが複雑になってしまうことがあります。

位置を調整するだけならposition以外の方法もあります。

CSSのpositionを使わない配置を紹介します。

空間の調整:padding,margin

marginは要素の外側を、paddingは要素の内側の空間を調整するCSSです。

positionでムリに調整せず、基本の調整はpadding,marginで行いましょう。

positionの場合

position

<style>
.example{
    position: relative;
    top: 20px;
    border: 1px solid #999;
    background: #EEE;
}
</style>
<div class="example">position</div>

marginの場合

margin

<style>
.example2{
    margin-top: 20px;
    border: 1px solid #999;
    background: #EEE;
}
</style>
<div class="example2">margin</div>

padding,marginについては下記で詳しく解説します。

ちょっと重ねたいなら:マイナスmargin

positionの特徴と言えば要素と要素を重ねることです。

実はmarginでも要素を重ねることができます。

maginはマイナス値を使えますのでこれで重ねます。

注意点としてpositionはz-indexで重なり順を操作できますが、マイナスmarginはhtmlの順に重なります。

positionの場合

重なる側
position
<style>
.example3{
    border: 1px solid #999;
    background: #EEE;
    padding: 10px;
}
.example4{
    position: relative;
    top: -20px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example3">重なる側</div>
<div class="example4">position</div>

marginの場合

重なる側
margin

<style>
.example5{
    border: 1px solid #999;
    background: #EEE;
    padding: 10px;
}
.example6{
    /*コレ*/margin-top: -20px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example5">重なる側</div>
<div class="example6">margin</div>

画像と重ねたいなら:background

imgと重ねるならpositionですが、divにbackgroundで画像を指定し、そのdiv内に要素を配置することができます。

positionの場合

position
<style>
.example7{
    position: relative;
}
.example7>div{
    position: absolute;
    top: 10px;
    left: 10px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example7">
    <img src="https://csshtml.work/wp-content/uploads/3.jpg" width="200px">
    <div>position</div>
</div>

backgroundの場合

background
<style>
.example8{
    background: url(https://csshtml.work/wp-content/uploads/3.jpg) no-repeat center center / cover;
    width: 200px;
    height: 133px;
}
.example8>div{
    margin: 10px;
    display: inline-block;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example8">
    <div>background</div>
</div>

画像の上に文字を重ねる方法については下記で詳しく解説します。

位置調整のためのCSS:flex

display:flexは子要素の位置を調整できるCSSです。

中央寄せ、右寄せ、下寄せも可能です。

marignやpaddingと組み合わせて細かい調整もできます。

positionの場合

position
<style>
.example9{
    background: #EEE;
    height: 200px;
    position: relative;
}
.example9>div{
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example9">
    <div>position</div>
</div>

flexの場合

flex
<style>
.example10{
    display: flex;
    align-items: flex-end;
    padding: 20px;
    box-sizing: border-box;
    background: #EEE;
    height: 200px;
}
.example10>div{
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
</style>
<div class="example10">
    <div>flex</div>
</div>

flexについては下記で詳しく解説します。

【まとめ】positionを使わない配置

  • 空間の調整:padding,margin
  • ちょっと重ねたいなら:マイナスmargin
  • 画像と重ねたいなら:background
  • 位置調整のためのCSS:flex

もちろんposition:absoluteのほうがふさわしい場面もあります。

ただ、同じ表現を別のCSS、手段があるということを知るとpositionでうまくいかないときに切り替えることもできます。ソースがシンプルになりミスが減ることもあります。

必要に応じてpositionを使わない配置を使っていきましょう。

関連記事