ホーム(記事一覧)へ

CSS position:absoluteの親子要素を解説

position:absoluteは要素を任意の位置に移動でき、便利なCSSです。

しかし、基準の決め方や、親を無視したり、はみ出さないようにするというのは意外と難しいのではないでしょうか。

CSS position:absoluteの親子要素を解説します。

position:absoluteの基準は直近の先祖要素(親要素)

absoluteは自分で基準を作ることができます。

基準は親以上の先祖要素に指定します。親に限定されないというのが特徴です。基本的には親要素に指定することをオススメします。

基準にしたい要素にstatic以外のpositionを指定します。position:relativeがオススメです。

親(relativeを指定)
absolute

<style>
.example{
    position: relative;
    background: #d6f7d3;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    width: 200px;
}
.example>div{
    position: absolute;
    left: 10px;
    top: 30px;
    background: #f6ff0d;
    padding: 10px;
    border: 1px solid #333;
}

</style>
<div class="example">親(relativeを指定)
    <div>absolute</div>
</div>

このとき、基準となる要素と動かしたい要素の間にstatic以外のpositionが指定されているとそちらが優先されてしまいますので注意です。

親要素を無視するには

基準を親要素ではなくそのもう一つ上の要素など、親要素を無視したいときもあるかもしれません。

先述したように基準は自分で決めることができ、親要素に限定するものではありません。

親以上の先祖要素にstatic以外のpositionを指定することで親要素を無視できます。

祖父(relativeを指定)
親(position指定なし)
absolute
<style>
.example2{
    position: relative;
    width: 200px;
}
.example2,.example2>div{
    background: #d6f7d3;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    display: block;
}
.example2>div>div{
    position: absolute;
    left: 90%;
    top: 0px;
    background: #f6ff0d;
    padding: 10px;
    border: 1px solid #333;
}
</style>
<div class="example2">祖父(relativeを指定)
    <div>親(position指定なし)
        <div>absolute</div>
    </div>
</div>

親要素をはみ出すには

absoluteは要素からはみ出すことができます。

親の幅、高さ以上の数値をtopやleftで指定するとカンタンにはみ出ます。

親要素をはみ出さないようにするには

overflow:hiddenで隠す

overflow:hidden
absolute
<style>
.example3{
    /*コレ*/overflow: hidden;
    position: relative;
    background: #d6f7d3;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    width: 200px;
    height: 60px;
}
.example3>div{
    position: absolute;
    left: 10px;
    top: 30px;
    background: #f6ff0d;
    padding: 10px;
    border: 1px solid #333;
}

</style>
<div class="example3">overflow:hidden
    <div>absolute</div>
</div>

rightやbottomで位置指定

leftで右寄せしてもレスポンシブ対応でwidthが小さくなったときはみ出てしまいます。

下記ははみ出す例です。ブラウザ幅を変えて確認してみてください。

overflow:hidden
absolute

<style>
.example4{
    position: relative;
    background: #d6f7d3;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    width: 50%;
}
.example4>div{
    position: absolute;
    /*コレ*/left: 121px;
    top: 30px;
    background: #f6ff0d;
    padding: 10px;
    border: 1px solid #333;
    width: 200px;
}
</style>
<div class="example4">overflow:hidden
    <div>absolute</div>
</div>

右を基準にしたいならrightを使いましょう。

overflow:hidden
absolute

<style>
.example5{
    position: relative;
    background: #d6f7d3;
    border: 1px solid #333;
    padding: 10px;
    box-sizing: border-box;
    display: block;
    width: 50%;
}
.example5>div{
    position: absolute;
    /*コレ*/right: 0;
    top: 30px;
    background: #f6ff0d;
    padding: 10px;
    border: 1px solid #333;
    width: 200px;
}
</style>
<div class="example5">overflow:hidden
    <div>absolute</div>
</div>

まとめ

position:absoluteの基準は親以上の先祖要素にstatic以外のpositionを指定する。

親要素を無視するには親にpositionを指定せず、それ以上の親要素(先祖要素)にstatic以外のpositionを指定する。

親要素をはみ出さないようにするにはoverflow:hiddenで隠したりrightやbottomで位置指定する。

以上、position:absoluteの親子要素を解説しました。

関連記事