要素ようそを絶対ぜったい配置はいちして要素ようそを動うごかないようにしよう【CSSを書かいていこう】

positionプロパティを使つかって、要素ようそを絶対ぜったい配置はいちする方法ほうほうについて見みていきます。

• 要素ようその絶対ぜったい配置はいち
• 動作どうさ確認かくにん

要素ようその絶対ぜったい配置はいち

前回ぜんかいまでで要素ようその位置いちを変かえていくプロパティについて見みてきました。

詳くわしくは『positionで要素ようその位置いちを変かえよう【CSSを書かいていこう】』を御覧ごらんください。

あわせて読よみたい

positionで要素ようその位置いちを変かえよう【CSSを書かいていこう】 要素ようその配置はいち位置いちを変更へんこうすることができるpositionプロパティについて見みていきます。 position 前回ぜんかいまででdisplayの操作そうさについて見みてきました。 詳くわしくは『displayプロパテ...

今回こんかいはpositionプロパティを使つかって、要素ようそを絶対ぜったい配置はいちする方法ほうほうについて学まなんで行いきます。

要素ようその絶対ぜったい配置はいちとは親おや要素ようそに対たいして親おや要素ようそが移動いどうしたとしてもしたいされた位置いちに必かならず配置はいちするという仕様しようです。

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

absolute

今回こんかいはdivタグの中なかにdivを作つくりボックスに対たいしてのラベルをを作つくってみます。

まずラベルなので幅はばと高たかさは小ちいさく指定していして行いきます。

絶対ぜったい配置はいちをする場合ばあいは子こ要素ようそにposition: absolute;を指定していしてあげます。

また、親おや要素ようそはstatic以外いがいにして置おかなければいけませんよく使つかわれるのはrelativeなので親おや要素ようそのposition: relative;と指定していしてあげましょう。

もし親おや要素ようそのpositionがstaticの指定していであればブラウザの左上ひだりうえを基準きじゅんに指定していすることになってしまうので注意ちゅういしましょう。

最後さいごに位置いちの指定していはfixdの時ときと同様どうようにtop, right, bottom, leftが使つかえるので指定していしたい場所ばしょをpxで指定していしてあげます。

以上いじょう