skillup

技術ブログ

デザイン

CSS positionについて

投稿日:

本日はpositionについて。

要素を通常、配置される場所から別の場所に配置させたいような場合positionを使います。

positionの使い方

相対配置 relative

相対配置は通常表示される位置から指定した距離だけ表示位置をずらすことができます。相対位置の場合、後続の要素に影響がなく、移動前の位置のサイズがそのまま確保されている。

ただしrelativeは位置をずらす目的で使用されることはあまりなく、内容する要素の基準位置を変更する場合や重なり位置の変更という目的で使用されることが多い。

絶対位置 absolute

absoluteの場合、後続の位置が詰めて表示される。要素にサイズを指定していない場合、内包されるコンテンツに合わせて縦横サイズが伸縮する。

abosoluteを指定している場合の基準位置は、親要素にpositionプロパティのstatic以外が指定されていると、そのボックスを基準に配置される。一般的には親をrelativeにして、新しい親を基準にすることになる。

固定配置 fixed

fixedはウィンドウの左上隅を常に基準として配置を行う。absoluteとの違いは、スクロールをしてもその位置を維持したままスクロールする点にある。ヘッダやフッターなどスクロールをしても常に画面上に表示しておきたい場合に使われることが多い。

z-indexプロパティ

相対配置と固定配置も含む絶対配置になっている要素は、通常、HTMLの後方のものほど前面に表示される。重なり順を変更する場合z-indexプロパティを指定することで、順序を変えることができる。順序の指定には整数を使い、0を基準に値の大きいものほど前面に表示される。

配置が崩れる場合のチェックポイント

floatした要素が崩れる意図せずに崩れてしまう場合

横幅と余白を確認

float要素が崩れる原因の多くは、回り込ませて横並びにしている要素のサイズが親の要素のサイズ以上になっていることによって起きている。くずれが発生した場合、まず並べている要素のwidth,padding,border,margin等のサイズを確認してほしい。特にwidthがない場合要注意。

floatした要素が親要素からはみ出してしまう場合

floatした要素が親要素からはみ出している場合は、親要素から見て中に何も含まれていないとなっているケースが多い。その場合、必ず指定した後にclearを指定して、高さを意図通りにするのがポイントになる。

その他、floatを使う際のポイント

  • floatする要素は必ずwidthを指定する
  • floatとwidthを指定した要素にはボーダーや余白を指定せず、内包する要素で指定する
  • float後は必ずclearを指定する

positionで気を付けることなど

絶対配置で意図した場所に表示されない場合

基準点にしたいブロックにrelativeを指定し、この要素を親要素とする。

絶対配置を指定した親要素の高さがなくなる場合

絶対配置を指定したabsoluteは通常の配置から切り離されてしまうため、高さがなくなってしまい、親要素に背景を入れて表現する場合は思った通りの背景が出ないことがある。内包する要素を絶対配置する場合、親要素の高さが足りなくなるため、親要素自体にheightやmin-heightなどの指定を入れて、高さを確保していく

-デザイン
-,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

no image

CSSの適用ルールと継承について

前回のエントリーでも書いたようにいまいちわかっていないことが多いので、復習します。 Contents1 セレクタの種類2 セレクタの詳細度3 継承 セレクタの種類 CSSのセレクタには下記のようなもの …

no image

CSSのレイアウト例 その3 固定+リキッドレイアウト

本日は固定レイアウト+リキッドレイアウトについて。 リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。 今回解説するのは例えば …

no image

横からスクロール sidrの使い方

携帯サイトの場合、端末のサイズが小さいため、メニューなどはどう縮めてもやはり圧迫してしまいます。 そんなとき、クリックさせてスクロールさせるタイプであれば、場所が狭いことが気になりません。本日はそんな …

no image

CSSのレイアウト例 その4 グリッドレイアウト

本日はグリッドレイアウトについて。 このサイトだけ見ても多分、デザインのイメージはわかないと思います(汗) サイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない 新・CSSデザイン …

no image

CSSはまりやすいポイント ※随時更新予定

CSSにてよく確認するのネタに関して Contents1 中央寄せ2 命名3 テーブル 中央寄せ vertical-alignを指定できるのは「インライン要素」と「テーブルセル」だけ text-ali …