ちなみに、親要素を辿ってもstatic以外で配置された親要素が無い場合は、body要素が基準となります。 absoluteを使う際には、親要素にposition:relative;を指定することをセットで覚えましょう。 5.position:fixed; 最後に、「position:fixed;」です。 親要素はrelativeにしておく.
親要素にあたる『(#explain)』はposition:relative;、子要素1の『(#explain2)』と子要素2の『要素③(#explain3)』はabsoluteになっています。 親要素の位置を基準として、子要素①はtopとleftで各30px、同じく子要素②についてはtopとleftが各60pxずつ親要素からズレています。 今回は、CSS positionを配置した親要素を起点にfixedさせる方法をご紹介します。 「トップへ戻る」ボタンを指定する際、 普通にfixedを指定すると、ページ全体を基準に絶対位置で位置が固定されます。 それを、メインコンテンツを基準にfixedを指定したい場合、 CSS positionプロパティ（配置）親要素を起点にfixedさせる. absoluteを使って位置調整するときは、親要素にposition:relative（もしくはfixed）を指定しておきましょう。これを忘れると基準位置がずれて思ったように表示されません。 2013/07/15 cssでのpositionプロパティ。よくお世話になります。 これ。 static これが初期値。特に配置方法の指定なし。まぁ、ほとんど指定すことは無い。 いまだかつて使ったことが無い。 relative 相対位置。 positionプロパティに指定出来るのは上記の通りです。親要素がstaticの場合にabsoluteを指定するとfixedと同じ挙動になりますが、まず使うことはありませんので、親要素には必ずrelativeを指定すること … 今回は、positionプロパティについてまとめたいと思います。 目次 1．positionプロパティの値 2．position: relative 3．position: absolute 4．position: fixed 1．positionプロパティの値 positionプロパティは、HTML要素の配置についての基準を指定するプロパティです。 実は、position:fixedには「親要素にtransformが使われていると、相対位置になってしまうバグ」があります。 以下のデモでは、親要素にtransformプロパティを指定しています。 DEMO. fixedのバグ.