FileMaker開発者のためのHTML/CSS/JavaScript入門 Day3

HTML/CSS/JavaScript for FileMaker Developers

FileMaker開発者のためのHTML/CSS/JavaScript　入門 Day3

CSS positionプロパティ – 1

2024-03-12 野田修

今回は前回少し触れたpositionプロパティについてです。
値にrelative, absolute, stickyを指定することによって要素がどのように動くのか、2回に分けて見ていきます。

今回はrelativeとabsoluteを、次回はstickyをご紹介します。

position: relative

2番目のdiv要素にだけこれを適用してみます。 

data:text/html,
<style>
    div{
        border:1px solid black;
        width:100px;
        height:100px;
        left:100px;
        top:50px;
    }
    div:nth-of-type(2){
        position:relative;
        background-color:pink;
    }
</style>
<div>Hello, HTML-1</div>
<div>Hello, HTML-2</div>
<div>Hello, HTML-3</div>
Hello, HTML-1
Hello, HTML-2
Hello, HTML-3

赤枠の左側上がhtmlコードで、右側下がWebビューアでの表示です。
div要素全てにleft:100px; top:50px;が割り当てられていますが、移動したのはposition:relativeが割り当てられた2番目のdivだけです。
前回ご説明した通り、left, topなど位置プロパティが有効になるためにはpositionプロパティが設定されている必要があります。
div:nth-of-type(2)は2番目のdiv要素を指定しています。

このようにpositionプロパティにrelativeを指定すると、その要素の本来あるべき位置を基準に、そこからどれだけleft(x軸方向), top(y軸方向)に移動させるかを指定することができます。

position: absolute

2番目のdiv要素にだけにabsoluteを適用してみます。 

data:text/html,
<style>
    div{
        border:1px solid black;
        width:100px;
        height:100px;
        left:100px;
        top:50px;
    }
    div:nth-of-type(2){
        position:absolute;
        background-color:pink;
    }
</style>
<div>Hello, HTML-1</div>
<div>Hello, HTML-2</div>
<div>Hello, HTML-3</div>
Hello, HTML-1
Hello, HTML-2
Hello, HTML-3

今回は先ほどとは違う結果になりました。
2番目のdiv要素の左上が全体の中で、left:100px、top:50pxの位置に移動しました。同時に3番目のdiv要素が上に繰り上がっています。
この現象を理解するためには次のように考えればいいのではないかと思います。
  • position:absoluteが割り当てられた要素は違うレイヤーに移動する
  • 元のレイヤーから2番目のdiv要素が消えるので3番目のdiv要素が上に繰り上がる。
  • 違うレイヤーに移動した2番目のdiv要素は、位置指定がなければそのレイヤーの中で左上隅に位置することになるが、left, topが指定されているのでその位置に移動する。
position:relativeが相対的位置指定であるのに対して、position:absoluteは絶対的位置指定ということになります。

position: absolute もう一つの不思議な挙動

先ほどの例でposition:absoluteを適用することによって別レイヤーに移動するという挙動をみていただきましたが、実はもう一つ不思議な挙動があります。

先ほどの例では width,heightを指定していたので、その挙動が見えなかったのですが、
width,heightを指定しないと、その挙動がはっきりわかります。

下の例を見てみてください。

data:text/html,
<style>
    div{
        border:1px solid black;
        left:100px;
        top:50px;
    }
    div:nth-of-type(2){
        position:absolute;
        background-color:pink;
    }
</style>
<div>Hello, HTML-1</div>
<div>Hello, HTML-2</div>
<div>Hello, HTML-3</div>
Hello, HTML-1
Hello, HTML-2
Hello, HTML-3

position:absoluteによってdiv本来のブロック要素としての特性、横幅いっぱいに広がるという特性が失われています。
インライン要素のようになっています。
このようにposition:absoluteが適用されると要素は特殊な挙動をしますので注意が必要です。

一方でこの特性があることによって、他の要素を気にせず要素位置を自由にコントロールすることができるようになります。

チャレンジ

  • Webビューアで今回のコードを再現したときに、このページでWebビューア表示としている部分とは見た目が少し違う部分があります。それが何かを見つけてください。(html/cssの挙動を観察する上でそれほど重要ではないと考えてあえて再現しなかった部分があります。)

参考リンク