|   | ☜ | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20 | ☞ |

position プロパティ

position プロパティを理解する

(X)HTML 文書は通常、記述されたとおりの順番で上から表示されていくが、CSS の position プロパティを使用すれば、(X)HTML 文書の最後に記述した要素をページの先頭に表示することも可能です。

position プロパティの４つの配置方法

position プロパティはボックスの配置方法を決めるプロパティで、static （通常配置）、relative （相対配置）、absolute （絶対配置）、fixed （固定配置）の４つの値を指定できます。

position プロパティに指定できる値：

値
説明
static （通常配置）
position プロパティの初期値。static を指定した場合、ブロックボックスは通常フローに従って垂直方向の上から下へ配置され、インラインボックスは水平方向へ配置される
relative （相対配置）
指定したボックスは、通常フローで配置されるはずの本来の位置を基点として相対配置される。基点からの距離は、top、right、bottom、left の各プロパティで指定する。隣接するほかのボックスとの位置関係は、relative を指定したボックスが本来の位置にあるものとして決定される。
absolute （絶対配置）
指定したボックスは、そのボックスを包含する祖先ボックスのうち、relative、absolute、fixed を指定された直近のボックスのパディング辺を基点として絶対配置される。基点となるボックスがない場合は、初期包含ブロックを基点として絶対配置される。基点からの距離は、top、right、bottom、left の各プロパティで指定する。
なお、絶対配置されたボックスは通常フローから外れ、後続ボックスはそのボックスが存在しないものとして通常フローで配置される。
fixed （固定配置）
指定したボックスは、表示領域を基点として固定配置される。fix を指定したボックスは、スクロール操作をしても常に同じ位置で固定して配置される。基点からの距離は、top、right、bottom、left の各プロパティで指定する。
なお、固定配置されたボックスは通常フローから外れ、後続ボックスはそのボックスが存在しないものとして通常フローで配置される。

static 以外の値を指定した場合は、ある 「基点」 を中心として位置が決定されます。

position プロパティで指定するのは、配置方法 （基準位置） のみです。「基点」 からの距離は、 top、 bottom、 left、 right を併用して、これらの値によって決まります。

配置の例

配置がどのようになるかを見るために、以下のような XHTML と CSS を用意した。

① を relative、absolute、fixed に変更してボックス"b" がどのように表示されるかを見てみる。ボックス"b"は BBB の文字列でライム色の背景色で表示されます。

  • XHTMLソース：
    • <div id="a">
    • <p>AAA</p>
    • <p>AAA</p>
    • <p>AAA</p>
    • </div>
    • <div id="b">
    • <p>BBB</p>
    • <p>BBB</p>
    • <p>BBB</p>
    • </div>
    • <div id="c">
    • <p>CCC</p>
    • <p>CCC</p>
    • <p>CCC</p>
    • </div>
    • <div id="d">
    • <p>DDD</p>
    • <p>DDD</p>
    • <p>DDD</p>
    • </div>
  • CSSソース：
    • body {
         margin : 20px;
    •    padding : 0;
    •    font-size : 75%;
    •    line-height : 1.5;
    • }
    • p {
    •    margin : 1em;
    • }
    • #a {
    •    width : 120px;
    •    padding : 1px 0;
    •    background : yellow;
    • }
    • #b {
    •    width : 120px;
    •    padding : 1px 0;
    •    background : lime;
    •    position : static; <== ①
    •    top : 100px;
    •    left : 180px;
    • }
    • #c {
    •    width : 120px;
    •    padding : 1px 0;
    •    background : aqua;
    • }
    • #d {
    •    width : 120px;
    •    padding : 1px 0;
    •    background : #cccccc;
    • }

上のソースを Web で表示した時の、ボックス"b"の配置の状況を絵解きで示します。

static

position: static の場合

relative

position: relative の場合

absolute

position: absolute の場合

fixed

position: fixed のその１    右向き矢印   position: fixed のその２
スクロールしても fix を指定したボックス"b"はその位置を変えない。

ページトップへ

z-index プロパティ　－　深度（重なり順序）の指定

position プロパティで static 以外の値を指定した場合、位置の指定によっては要素同士が重なることがあります。

要素の深度（重なり順序）を指定するには z-index プロパティを使用し、立体感を表現します。

z-index プロパティには正数値または auto、inherit を指定でき、正数値の値が大きいボックスほど前面に表示されます。値が同じ場合には、あとに出現したボックスが前面に表示されます。

auto の指定は、z-index 値の指定が無い場合と同様にソース内であとに記述されている要素が上に重ねられ前面に表示されます。

position プロパティを指定しない要素と指定した要素とでは、z-index 値の指定に関係なく、position プロパテイを指定した要素が前面に表示されます。

z-index を指定しない場合

z-index 指定なしの場合

z-index を指定した場合

z-index を指定した場合

ページトップへ

position プロパティの応用

position プロパティを使ってステッカー画像を重ねる

position プロパティを利用すると、ある要素を基点として画像などの要素を配置できるため、位置の指定が直観的にできます。

また、float を使う場合とは異なり、あとから画像を追加することも簡単にできます。

ヒントのアイコン

あとから要素を追加するときにも効果を発揮

最初の段階では画像などの要素がなく、あとから要素を追加したいとなるケースもあります。これを float で実現しようとすると、関連する要素のスタイルを変更したり、後続要素のレイアウトを調整したりしなければならない。

しかし、position プロパティを使って配置する方法ならば、ほかの要素に手を加えることなく追加できます。

ステッカー画像を重ねる例えば右の図のように、ステッカー画像を右上隅に配置することができます。

ポイントは、画像のスタイルを相対配置 (position: relative;) にし、その子要素 (a 要素） を絶対配置 (position: absolute;) で指定していることです。

これにより、画像が本来配置される位置を基点として、a 要素の絶対配置の位置を top プロパティと right プロパティで調整できるようになります。

具体的なソースです。

  • CSSソース：
    • .sticker {
    •    position : relative ;
    • }
    • p.sticker a {
    •    position : absolute ;
    •    top : -1em;
    •    right : 0em ;
    • }
  • XHTMLソース：
    • <body>
    • <div id="container">
    • <div>
    • <p class="sticker"><a href="#"><img src="images/sticker01.gif" width="300" height="300" /></a></p>
    • <h1>見出し１です　見出し１です</h1>
    • <h2>見出し２です　見出し２です</h2>
    • <h3>見出し３です　見出し３です</h3>
    • <h4>見出し４です　見出し４です</h4>
    • <h5>見出し５です　見出し５です</h5>
    • </div>

具体的なスタイルの設定については、「ビルダーでのスタイルの設定と編集」 → 「画像のスタイルの設定」 → 「ステッカー画像を重ねる」 を参照ください。

position プロパテイで画面中央の配置を実現する

左右中央の配置は、margin プロパティの値を 0 auto などとすることで容易に実現できますが、上下も中央に配置する場合、margin プロパティだけでは実現できません。

そこで、position プロパティと margin プロパティを併用して実現できます。

まずは、絶対位置指定を使用するために position プロパティの値を absolute とし、次に top プロパティと left プロパティの値を 50% に指定して、中央に基点を作ります。

このままだと、ボックスの左上が中心に配置され、レイアウトが右下にずれるので、調整が必要になります。

そこで、ボックスの縦横の長さ （width プロパティおよび height プロパティ） の半分の値を margin-top プロパティと margin-left プロパティに指定します。これでボックスを中央に配置できます。

ページトップへ

|   | ☜ | 1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20 | ☞ |