忍者ブログ
Flex,Java,Html など、調べた事のメモ帳です。 間違ってたらゴメンなさい。
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

positionrelativeとは?

まず、そもそもpositionrelativeとは何でしょうか。

CSSpositionプロパティはボックスの配置方法を決めるためのプロパティで、その値としてはstaticabsoluterelativefixedの4種があります。初期値はstaticです。位置の指定はtop、bottom、left、rightの各プロパティで行います。

それぞれの値の意味は下の表のようになります。

説明
static HTMLに記述された順序に従い通常の方法でブロックを配置します。
relative staticの場合の位置を基準にブロックを相対配置します。後続のブロックの配置はそのままです。
absolute 親要素またはbody要素(つまりページ全体)を基準にブロックを絶対配置します。後続のブロックは詰めて配置されます。
fixed ウインドウを基準にブロックを絶対配置します*1。さらにウインドウ内での位置は固定されスクロールしても位置が変化しなくなります。

すなわちpositionrelativeを指定すると通常の位置からtop、bottom、left、rightの各プロパティの値の分だけずらして要素を配置することができます。top、bottom、left、rightの各プロパティにはマイナス値も使えます。例えば、top: 10pxと組み合わせれば通常位置を基準に上から10pxの位置(すなわち通常位置の10px下)に、top: -10px; left: 10pxと組み合わせれば通常位置を基準に上から-10px左から10pxの位置(すなわち通常位置から上に10px右に10pxずれた位置)にボックスが配置されます(下図)。

position: relativeの例

ただ、実際のところpositionrelativeでは位置をずらした分後続の要素を詰めないので通常の配置の位置にぽっかりと無駄なスペースが空いてしまい、CSSでWebデザインをする上ではあまり使い勝手が良くありません。また、IEではバグにより本来のスペース以上に広く空白が空くことがあるのでposition:relative;を使う場合にはIEでの表示にも注意する必要があります。

それではpositionrelativeは使わないかというとそんなことはありません。確かに相対配置は使いにくいのですが、positionrelativeという設定自体はpositionプロパティを利用したデザインの上で欠かせない存在だと思います。

次にどのような場面でpositionrelativeという設定を使うのか、使いドコロを見ていきましょう。

使いドコロ1: position: absoluteと組み合わせる

1つ目の使いドコロはposition: absoluteと組み合わせる使い方です。

先程の表のposition: absoluteの説明で「親要素またはbody要素を基準に…」と書きました。では親要素とbody要素のどちらを基準にするかはどのように決まるのでしょうか?

実はこれは親要素のpositionプロパティの値によって決まります。position: absoluteを指定した要素の親要素にpositionプロパティの値がrelativeabsolutefixedのものがあればそのうち最も近い階層の親要素が、relativeabsolutefixedのものがなければbody要素が絶対配置の基準となります。つまり絶対配置でbody要素以外を基準にしてボックスを配置したい場合、基準としたい親要素のpositionプロパティをrelativeabsolutefixedのいずれかに設定しておけばよいわけです。

このとき便利なのがpositionrelativeです。デザイン上の必要性があり基準としたい親要素に既にrelativeabsolutefixedのいずれかが設定されていればそれをそのまま利用できますが、そうでない場合positionrelativeにしておけば、absolutefixedのように後続の要素を詰めないのでデザインを崩しませんし、top、bottom、left、rightの各プロパティの値を設定しなければ通常位置のまま絶対配置の基準とすることができます。

この使い方は言うならば「絶対配置の基準を定めるpositionrelative」といったところでしょうか。

使いドコロ2: z-indexと組み合わせる

2つめの使いドコロはz-indexプロパティの指定と組み合わせる使い方です。

position: absoluteなどを使ってブロックを色々な場所に配置しているとブロックの重なり方を制御する必要性が出てきます。このようなブロックの重なる順序を制御するのがz-indexプロパティです。z-indexプロパティは通常の値を0として値が大きいものほど手前に重ねて表示します。

z-indexは凝ったデザインを作る際に便利なプロパティですが、これを有効にするためには適用する要素のpositionプロパティの値がrelativeabsolutefixedのいずれかである必要があります。

使いドコロ1の場合と同じくここでもposition: absoluteが便利です。通常位置に配置しながらz-indexプロパティを指定したい場合にtop、bottom、left、rightの各プロパティを設定せずにpositionプロパティの値をrelativeに設定すれば、デザインを崩さずにz-indexプロパティの指定を適用することができます。

この記事にコメントする
name
title
color
mail
URL
comment
pass   Vodafone絵文字 i-mode絵文字 Ezweb絵文字
secret (チェックを入れると管理人だけに表示できます)
ブログランキング
にほんブログ村 IT技術ブログ IT技術メモへ
 
カレンダー
06 2017/07 08
S M T W T F S
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31
人気ブログランキング
ブログランキング ブログランキング
最新CM
最新TB
ブログ内検索
PR
ATOM  
ATOM 
RSS  
RSS 
Copyright ©   プログラムメモ   All Rights Reserved
Design by MMIT  Powered by NINJA TOOLS
忍者ブログ [PR]