たねっぱ！ » position https://taneppa.net コツコツあつめるWeb作りのためのたね　たねっぱ！Web系情報ブログ　Webのお役立ちネタ配信中！ Tue, 09 May 2023 00:02:06 +0000 ja hourly 1 http://wordpress.org/?v=3.5.1 CSS positionを使ってみよう！ https://taneppa.net/position/ https://taneppa.net/position/#comments Tue, 24 Jun 2014 01:20:29 +0000 yanoppa! https://taneppa.net/?p=1752

おはこんばんちわ、文章書くのまぢ難しいと嘆くやのっぱです(´・ω・｀)

さて、よくpositionがよくわからなぃ。。。ﾖﾖﾖ

という声を聞くので、今日はpositionってなんぞや？というお話です。

position=ポジション
その名の通り、位置を調整します。

プロパティはこんな感じ

relative 相対位置
absolute 絶対位置
fixed 固定位置
static 通常位置

合わせて使うプロパティ

top 基準の上辺を基準に移動
right 基準の右辺を基準に移動
bottom 基準の下辺を基準に移動
left 基準の左辺を基準に移動
z-index 重ね順を指定

と並べましたが、相対位置？絶対？なにそれ美味しいの？(´・ω・｀)
ってなりますね。

こまかく説明すると余計わからなくなると思ったので、かむく。。噛み砕いて説明するよ！
上の表はちょっと忘れましょう。

relative レラティブ

元居たところから、位置を移動するよ！
だけど、relativeで位置を調整することはほとんどないです。
absoluteの基準にしたいボックスに与えるだけ！って決めて使ったほうが安全！！
IEバグで空白いっぱい！とかになっちゃうこともあるから注意！

absolute アブソリュート

relative,absolute,fixedが与えられた親要素を基準に位置を移動できるよ！
親要素にpositionプロパティがなかったらbodyが基準になるので注意！！
動かしたい要素にabsoluteを与えたとたん、あれ？どこいった？ってなったら、親要素にプロパティが与えられているかも確認しましょう！

fixed　フィックスト

ウィンドウを基準に位置を指定できるよ！
よく見るずっと右下に居るページトップボタンはこれですね！
ウィンドウの下を基準に50px上(bottom:50px;)、右を基準に左へ50px(right:50px;)ってすると
右下にずっといることになります。
IE6は対応してないから注意です！

static　スタティック

position使うのやめるよ！
通常の状態に戻す役割です！
一応説明したけど、使うことあまりないです。

あとはtopやleftで位置を調整したり、重ね順を調整するのがpositionってプロパティです。

といってもよくわからない、なのでデモを用意してみました！
実際にやってみましょう！



入力すると位置が変わります。pxまで打ち込んでね

relative(水色) absolute(緑)


relativeが動くとabsoluteも動きましたね！
relativeの中にあるabsoluteの基準は親のrelativeになっているんです。

relativeのない状態でabsoluteを置くとbodyが基準となりますので、注意です。
基本relativeで位置を調整するのではなく、親要素にrelativeを与えて、動かしたい子要素にabsoluteを与えるのが基本になると思います。


次に、z-indexですが、adobe製品を触ったことのある方ならレイヤーの順番といえばわかりやすいかと思います。
relativeやabsoluteの重なり順になりますね。

これもわかりにくいと思いますので、またデモを作ってみました。



サンプルテキストだよ
さんぷるテキストだよ
サンプルてきすとダヨ
サンぷるてきストだよ
relative
(水色)		 absolute
(緑)		 text

入力すると重なり順が変わります。わかりやすいかと思い、色は半透明にしてます。



なんとなく雰囲気はつかめましたでしょうか？
0を基準に重なり順を変えることができます。
指定しなかった場合は、HTMLを書いた順になります。
HTMLは上から読んでいくので後に書いたほうが重なりは上になりますね。


注意すべきはrelativeが基準ということです。
入力すると重なり…のテキストはrelativeボックスの子要素ではないので、relativeボックスを高くすると文字が隠れます。
色々と入力してみて雰囲気を掴んでください！



最後にfixedです
フィクスト(ド)はウィンドウを基準に固定されます。
使ったことのない人からするとなんのこっちゃ抹茶に紅茶ですね。
よくheaderがずっとウィンドウ上部に居たり、サイドコンテンツがスクロールしてもずっと居るのがフィクストです。

気をつける点は、ウィンドウが基準ということ！
右にページヘ戻るボタンを配置した場合、ウィンドウ幅が狭くなっていくとコンテンツに被ってきたりします。
よく考えて使用しないといけませんね！

デモは作りませんでしたが、Page Topボタンがfixedです。

でわこのへんで、よいコーディングライフを！(・ω<)ﾉｼ

]]> https://taneppa.net/position/feed/ 0 見ながら覚えよう！positionプロパティ「absolute」と「relative」についてのお話 https://taneppa.net/position_property/ https://taneppa.net/position_property/#comments Wed, 06 Feb 2013 09:05:51 +0000 yukappa!(INO) https://taneppa.net/?p=212 私もちょっと長いこと、

  • absolute＝絶対位置
  • relative＝相対位置

といわれても全然ピンときてませんでした。「絶対？相対？どういう意味？」という感じだったのですが、
きっと、考えるより実際見てみたほうがわかりやすいと思います！

実際にページに配置して確認してみましょう。

01ページ内に配置してみる

<body>～</body>内のソース

<body>
<div id=”box”>配置するボックス</div>
<p>テキスト</p>
</body>

「absolute」

ページ左上から120px、左から120pxの場所に表示されます。

01

「relative」

ページ左上から120px、左から120pxの場所に表示されます。･･･が！！！テキストの場所が違います。 02

テキストの上部に謎の隙間ができますね・・・
これは、relativeが元々表示されるはずだった高さが残るためです。
元々あるべき位置から見た目だけ右下にずれた。と考えたほうがわかりやすいかもしれません。
03

この表示のクセがわかれば簡単です！
次もきっとさくさくわかるハズ(*´o｀*)ﾉ

02ボックスが重なった場合

次に、ボックスが2つになった場合を見てみましょう
下の黄緑色のボックスは

position:relative;
top:100px;
left:100px;

で位置指定をしています

配置するボックスは
ページ上から120px、左から120pxの場所に表示されます。

<body>～</body>内のソースは

<body>
<div id=”box1″>下に敷いているボックス</div>
<div id=”box2″>配置するボックス</div>
</body>

としています。

それでは、二つの配置を確認してみましょう！

「absolute」

下のボックスなんて問答無用！で左上からの絶対位置に表示されます

04

「relative」

黄緑色のボックスは「relative」指定だったので実は元々あった場所に高さが残っていました。
ちょっとややこしいのですが、ピンクのボックスは元は「半透明になっている黄緑ボックス」の下に配置されるはずだったのですが、(さっきのピンクのボックスのテキスト位置を思い出してみてください(*´o｀*)！「relative」で位置を指定しているので「本来配置されるべき位置」からの座標位置に配置されています

05

03ボックスの中に配置した場合

次に、ボックス内に配置した場合の「absolute」「relative」の違いを確認してみましょう

外側の灰色のボックスは
先ほどと同じく、

position:relative;
top:100px;
left:100px;

で位置指定をしています
※padding指定は20pxにしています。(薄い灰色で塗りつぶした部分)

配置するボックスは
基準点より上から20px、左から20pxの場所に表示されます。

<body>～</body>内のソースは

<body>
<div id=”box1″><div id=”box2″>配置するボックス</div></div>
</body>

※box1＝外側の灰色ボックスです

「absolute」

親となるボックスの左上を基準点とし、
上から20px、左から20pxの場所に表示されます。

06

「relative」

元々配置されるべきだった「paddhingを含めた描画位置」を基準点とし、上から20px、左から20pxの場所に表示されます。

07

まとめ

青のボックス「absolute」は親ボックスの指定が何であっても、必ず左上を基準点とする(絶対位置)
→基準点から数値を指定して、表示したい場所に配置したいときに便利
ピンクのボックス「relative」は本来ピンクのボックスが表示される位置を基準として配置(相対位置)
→「元の位置から○ピクセルずらしたい」というときに使用すると便利

気をつける点：親ボックスの位置や設定を受ける場合があるので(特にrelative)忘れず注意すること

よく使われるパターンは親ボックスがrelative(またはabsolute)、その中にabsoluteです。

わかりづらいけれど使えるようになるととっても便利なpositionプロパティ、
どんどんチャレンジしてみましょう！

]]> https://taneppa.net/position_property/feed/ 0