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

WordPressのカリキュラムを考える

WordPressを触っていますが、ちょっと体系的に覚える必要がありそう。 結構長い間、触ってきましたが、体系立てて覚えていないのでいざこの処理は?ときかれると案外迷います。 例えば0から初心者に教え …

no image

AngularJS カスタムディレクティブ

AngularはHTMLの中にng-clickなどと書いておけばイベントを紐づけて、特定動作時にメソッドを呼び出すことができます。 これをオリジナルで自作することができます。 customer_dir …

no image

CSSを書くときのコツ

前回のCSSのルールを踏まえて、今回はCSSを書くときの概念的なルールです。 Contents1 CSSのデメリット1.1 抽象化が難しい1.2 すべてのルールがグローバルスコープ2 CSSを書くとき …

no image

CSSでのtableについて

tableで気を付けたいポイントなど。 Contents1 ボーダー表示2 テーブルの背景色とボーダーのスタイル3 tableのレイアウト3.1 table-layout auto3.2 table- …

no image

lessサンプル

lessのサンプル Contents1 lessファイル構成2 ソース3 注意点4 参考リンク lessファイル構成 header,footer sytle 変数 lib 関数 common head …