CSS position(absolute･relative･fixed)を解除する方法

CSSのposition:absoluteは細かい位置移動や要素を重ねたり、上部固定などができます。

でも、スマホ版になったとき解除したいんだよなぁ、と思うことでしょう。

CSS position(absolute･relative･fixed)を解除する方法について説明します。

leftやtopの解除方法はこちら↓

positionの基本的な書き方はこちら↓

解除方法1.position:staticで上書きする

div{
    position: static;
}

position:staticはあなたの望み通り、positionを解除したいときに使います。

例えばposition:absoluteを使ってパソコン版で位置指定していた要素をスマホ版で解除するときに使えます。

またはposition:relativeを解除して、absoluteの基準位置をさらに親要素に変更するといったときにも使えます。

下記は具体例です。ブラウザ幅を1000px以下にしたときposition:absoluteが解除されるようになっています。

<style>
.example{
    position: relative;
    background: #EEE;
    height: 200px;
}
.example>div{
    position: absolute;
    left: 30px;
    top: 30px;
    background: #ffee6d;
    border: 1px solid #999;
    padding: 10px;
}
@media(max-width:1000px){
    .example>div{
        /*コレ*/position: static;
    }
}
</style>
<div class="example">
    <div>position:absolute</div>
</div>

解除方法2.position:initialを使う

div{
    position: initial;
}

「initial」はデフォルトに戻すCSSの値です。解除にも使えます。

positionに限らず どのCSSプロパティにも使えますがIEでは使えません。

GoogleアナリティクスなどでIEの割合を確認し少ないようなら使うのもアリです。

現在IEの利用率は下がりつつあります。

ただ、どんなときでもpositionの初期値はstaticですので、position:staticでよいでしょう。

まとめ

position:staticを上書きで指定することでposition:absoluteやposition:relative、position:fixedを解除できる。

以上、CSS position(absolute･relative･fixed)を解除する方法でした。