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

bulmaフレームワークに関して form編

前回に続き、bulmaフレームワークのCSSのformがらみに関して。 ソースはこちら メモ的に。 controlはinput,select,textareaなどをwrappingする要素。通常だとあ …

no image

tableのレイアウトに関して

tableのcssに関して。 https://github.com/umanari145/css 幅を決めるのでも%表記をしたいときはauto、数値固定で行きたいときはfixed。 詳しくはリンクのt …

no image

画像ネタまとめ(画像中央寄せ)

ギャラリー的な画像を使ったときに思ったこと。下記が画像の標準的な扱い方かな・・・ 枠自体は高さも幅も決める(li要素のwidth,heightは決める) 基本は画像要素を中央揃え(positionの5 …

no image

CSS floatについて

以前もちょっと書きましたが、CSSのfloatについて。 http://skill-up-engineering.com/?p=1708への追記 親から見るとfloatした子供は存在しない状態 flo …

no image

キャッチ画像の扱いについて

今さらながらですが、サイトのトップなどに貼り付けるメインビジュアル系の画像の処置について。 スマホサイトオンリーだとあまり考えなくてもいいかもしれませんが、PCやレスポンシブの場合、ブラウザの幅が伸縮 …