CSS positionが効かない原因と解決方法

positionは自由に場所を指定でき、非常に便利なCSSです。

しかし、ルールが多く思った通りになかなかいかないこともよくあります。

CSS positionが効かない原因と解決方法を説明します。

CSS positionの基本はこちら↓

要素の探し方

positionで指定した要素を見失ってもhtmlコードが消えたわけではありません。

DevToolsを使ってみつけましょう。

ソースの位置は変わっていないのでhtmlソースでposition:absoluteを指定したhtmlタグを見つけます。

するとmarginやpaddingに色がつくので見つかります。

見つけてからの方が解決しやすくなります。

原因1.position:relativeを指定していない

position:absoluteを使うと位置を自由に指定できますが、親あるいはその先祖の要素にposition:relativeを指定して基準値を定める必要があります。

または、position:relativeを指定したつもりが、兄弟要素だった、という場合でも効きません。

解決方法

position:relativeを親要素またはその先祖に指定しましょう。

親要素がposition:absoluteの場合

position:relativeで基準値を決めましょうと話しましたが、厳密にはposition:static以外のpositionが指定されていればそこが基準値になります。

<div style="position:relative">
  <div style="position:absolute">
    <div style="position:absolute">これを動かす</div>
  </div>
</div>

上記の場合3番目のdivの基準値は2番目になります。

1番目にposition:relativeを指定していますが、途中の親要素にstatic以外のpositionが指定されていれば飛ばすことはできません。

解決方法

position:absoluteの子要素に設置せず、外の要素に置きましょう。

原因2.親要素にoverflow:hiddenが指定されている

position:absoluteは自由な位置に指定できます。

一方overflow:hiddenは範囲外の要素を隠すCSSです。

overflow:hiddenが指定された要素の範囲外にposition:absoluteがある場合見えなくなります。

解決方法

overflow:hiddenをなくすか、それが無理ならoverflow:hiddenを指定している要素の外の要素にposition:absoluteをしたい要素を持っていきましょう。

失敗例

<div style="position:relative; overflow:hidden;">
    <div style="position:absolute">これを動かす</div>
</div>

成功例

<div style="position:relative;">
    <div style="position:absolute">これを動かす</div>
</div>
<div style="overflow:hidden;">
</div>

原因3.親要素の高さが0なのに%指定している

（すべての）子要素にposition:absoluteをかけると親要素の高さは0pxになります。

親要素の中には何もないような状態になっているからです。

この状態で「top:50%」「bottom:50%」など縦の位置調整を%指定しても動きません。top,bottomは親要素（基準値）の高さを基準にするからです。

0×50％＝0　だからです。

解決方法

親要素に高さを指定するか、top,bottomを%以外で指定しましょう。

原因4.z-indexが負けている

z-indexは要素の重なり順を指定するCSSです。主にpositionとセットで使います。

z-indexの数値が負けていて、他の要素がかぶさっているとみえなくなり消えたように見えます。

z-indexの数値を大きくしてみましょう。

z-indexの使い方はこちら↓

原因5.topやbottomに問題あり

topやbottom、left、rightはpositionとセットで使い、場所を指定するCSSです。

マイナスを指定している

これらにはマイナスも指定できますが、これにより画面外に飛び出ていることもあります。

topやbottomの数値をいったん0にしてもとに位置に戻して確認しましょう。

auto以外の値になっている

bottomを指定したいのに反対側であるtopが「top:0」のように数値指定されているとお互いが引っ張り合って意図した場所になりません。

「top:auto」のようにautoを指定して初期値に戻しましょう。

leftとrightも同様です。

それでも解決しないとき

他に原因があるかもしれません、記述ミス、優先度で負けているなど。

こちらの記事を参考に見直してみてください。

まとめ

CSS positionが効かないときは以下を確認してみましょう。

• 親要素に「position:relative」を指定しているか確認
• 親要素に「overflow:hidden」が指定されていないか確認
• 親要素の高さが0になっていないか確認
• z-indexが負けていないか確認
• topやbottomの数値を確認

以上、CSS positionが効かない原因と解決方法でした。