ホーム(記事一覧)へ

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はpositionとセットで使い、場所を指定するCSSです。

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

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

それでも解決しないとき

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

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

まとめ

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

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

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

関連記事