deep-space.bluedeep-space.blueIT女子の深宇宙。Wordpressとか、コーディング・フロントエンドのいろいろ。「positionは失敗するとバグるので使わないようにしています」あるとき、cssがそこそこかける人に、そんな悲しいことを言われました。cssがそこそこ使えるようになったときに、できるようでできないのがpositon!positionは使い方を身につけるまでは、安易に使うとすぐにおかしなことになるのです。positionのことを理解すれば超便利!positionとお友達になろう!positionが怖くなくなるまで徹底的に意味をおさらい!positionとはpositionプロパティは、ボックスの配置方法(基準位置)が、相対位置か絶対位置かを指定する際に使用します。positionプロパティで指定するのは、配置方法(基準位置)のみです。rightを併用して、基準位置からの距離を設定する必要があります。http://www.htmq.com/style/position.shtml......そうですね、これは難しい......positionとお友達になればこの説明の意味も分かるようになるでしょう......!簡単に言ってしまうと『何かの要素の上にとある要素を重ねたり、画面の上部や下部についてくるメニューやボタンをcssで配置するときに活躍するのがposition』です。これらがどんなものかを理解することが、position使いこなしのとっても大切なポイントです。positionで基準位置を決めるまずはpositionで置きたいものの基準になる位置がどこかを考えます。何の気なしにposition:absoluteしたときとりあえず配置したいものにposition:absolute;を設定すると、基準位置はページの一番上=top:0;ページの一番下=bottom:0;ページの左端=left:0;ページの右端=right:0;こんな感じになります。下記のように親・祖先要素にposition:static;以外が設定されているときを除きます。position:absolute;の要素の親・祖先要素がposition:static以外になっているときposition:absolute;の要素の親・祖先要素にposition:relativeなどstatic以外が設定されているとき、基準位置はposition:static以外が設定されている要素の上端=top:0;下端=bottom:0;左端=left:0:右端=right:0;このようになります。特別な理由がない限りは、基準位置にしたい親・祖先要素にposition:relativeを使うとよいでしょう。何の気なしにposition:fixedしたときとりあえず配置したいものにposition:fixedを設定すると、基準位置はウィンドウ(描画領域)の上端=top:0;下端=bottom:0;左端=left:0:右端=right:0;になります。画面をスクロールしてもずっとついてくる、追従バナー・追従ナビにはposition:fixedを使います。position:relativeした要素にtop:0とかをつけるときposition:relativeにtop:0などの位置指定をつけるのはお勧めしませんが、このとき基準位置はposition:staticだった時のその要素の上端=top:0;下端=bottom:0;左端=left:0:右端=right:0;になります。作るときはともかく、あとからメンテナンスする際にわけが分からなくなりやすいので、position:relativeした要素にtop:0;などの位置指定はできるだけ使わないようにしましょう。やって使えば全然怖くないposition怖くないpositionの使い方は下記の2つ。基本的には下記の2つの使い方をしましょう。これと決めた基準位置にposition:relative;、配置したいものにposition:absolute;で配置するまず何の上に(何の中に)要素を乗せたいのか、基準位置にする要素を決めます。配置したい要素は、基準位置にする要素の子孫要素にします。画面に追従する要素には臆することなくposition:fixed;ページをスクロールしても、画面の同じ位置に常に表示される要素にはposition:fixed;を何も考えずに指定しましょう。headerなどの画面幅いっぱいに広がる要素にはleft:0;とright:0;を両方使うことを超お勧めします。positionあるあるを徹底的に解決!position:absoluteにした瞬間に要素が消滅したんですが?画面の一番上とか一番下とかにスクロールして探してみましょう。ポイント:基準位置を決めるためのposition:relativeを忘れていませんか?position:absoluteにした瞬間に、基準位置として使っている要素の高さがなくなりましたが?position:absoluteの要素は、その高さを囲んでいる要素に伝えることができなくなります。ポイント:基準位置の要素に1heightを指定する、2paddingを指定する、3position:staticまたはposition:relativeの要素を配置できませんか?position:relativeの要素にtop,bottom,left,rightを指定したのですが、どういうルールで動いているんでしょうか?cssのルール上はposition:relativeにもtop,bottom,left,rightを指定して位置を移動することができます。その場合、その要素がposition:staticだった時の位置からみて上下左右にどれだけ動かすかになるので、基準の位置が分かりにくいです。ポイント:top,bottom,left,rightを使うのはposition:absoluteまたはfixedのときだけにしましょう。position:absoluteにした要素を動かすためにtop,bottom,left,rightを使わず、marginを使ったのですが大丈夫でしょうか?基本的にはtop、bottom、left、rightを使って位置を設定しましょう。必要に応じてmarginと組み合わせるのは問題ありません。中央寄せのテクニックなどでmarginを使うことはあります。ポイント:基準位置の上下左右から数えてどれくらいの位置に置きたいかをtop,bottom,left,rightで表現できないか、確認してみましょう。レスポンシブでもposition:absoluteでの配置はちゃんと使えるんでしょうか?どのようなデザインを実現するかによって難易度は変わりますが可能です。ポイント:基準位置の要素の大きさも、配置する要素の大きさも、そして位置の指定もすべて%で計算して配置してみましょう。position:absolute;の子孫要素にposition:absolute;を使うとどうなりますか?たとえばposition:relativeが祖先にいて、親にposition:absoluteがいる、position:absoluteの要素の位置を考えてみましょう。このとき基準位置になるのは親のposition:absoluteの要素です。position:absolute;の基準位置は一番近くのposition:staticではない親・祖先要素。ポイント:近い祖先にposition:staticではない要素があれば、遠い祖先にposition:relativeがいても、そこは基準位置にならないので覚えておきましょう。今回のレイアウトはこちら。...PC専用サイトのレスポンシブ化!?に使えそうなcss/js小技あれこれPC専用に作られたサイトを、レスポンシブでスマホ対応してください。...【アニメのサイトが好き】「ポプテピピック」【2018冬アニメ】アニメのサイトが好きです。コメントをキャンセルメールアドレスが公開されることはありません。コメントデータの処理方法の詳細はこちらをご覧ください。セットアップはこちらを参照ください。書いている人web系人。htmlとcssが得意。病院とお薬とSFが好き。