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を書く時のポイントについて

先月にかなりたくさんCSSを書いたんでその時感じたポイントみたいなものを。 Contents1 いきなりかかずにまず共通部分をみつける2 見た目の調整には紙に印刷して横においておく3 色や幅、フォント …

no image

CSSの概要 主に適用ルールについて

昨日までリーダブルコードを読みまして正しいコーディングについて書いてきました。 本日からは正しいCSSについてみていこうと。 Contents1 CSSとは?2 CSSの書き方3 CSSの挙動4 プロ …

no image

lessサンプル

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

no image

UIまで手が回らないプログラマのための画像加工サービス&ツール紹介など

本業はプログラマ―なんですが、ガチンコ塾のブログの画像を作る程度の加工などをちょこちょこやってます。 プログラマーといえどUIを全く気にしないのは問題ですし、中小企業だと広く浅くできる人間が求められる …

no image

checkboxのカスタマイズ

ブラウザのディフォルトではなくcheckboxをカスタマイズしたいとき。 やったことなかったんですが、やってみると結構面白い。 Contents1 ソース2 参考リンク ソース まずはソースを。 ht …