position:absoluteの親要素を解説【親要素を無視・はみ出す】

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

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

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

position:absoluteの基準は直近の先祖要素（親要素）

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

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

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

<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を指定することで親要素を無視できます。

<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で隠す

<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が小さくなったときはみ出てしまいます。

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

<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を使いましょう。

<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の親要素

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

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

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

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