CSS

要素を絶対配置してみよう

positionプロパティを使って、要素を絶対配置する方法について見ていきます。

  • 要素の絶対配置
  • 動作確認

要素の絶対配置

・positionプロパティを使って、要素を絶対配置する方法について学んで行きます。要素の絶対配置とは親要素に対して親要素が移動したとしてもしたいされた位置に必ず配置するという仕様です。

・例えばある要素の説明としてラベルを張っておきたい場合などによく使われます。

absolute

・今回はdivタグの中にdivを作りボックスに対してのラベルをを作ってみます。まずラベルなので幅と高さは小さく指定して行きます。

・絶対配置をする場合は子要素にposition: absolute;を指定してあげます。また、親要素はstatic以外にして置かなければいけませんよく使われるのはrelativeなので親要素のposition: relative;と指定してあげましょう。

・もし親要素のpositionがstaticの指定であればブラウザの左上を基準に指定することになってしまうので注意しましょう。

・最後に位置の指定はfixdの時と同様にtop, right, bottom, leftが使えるので指定したい場所をpxで指定してあげます。

-広告-

 

 






-CSS