htmlのposition属性の使い方を解説（4種類）

positionの4つの属性値。

1. 相対的
2.絶対
3.固定
4.静的

これら4つのプロパティのそれぞれについて、以下に説明する。

 /**
     * @hide
     */
    public Notification(Context context, int icon, CharSequence tickerText, long when,
            CharSequence contentTitle, CharSequence contentText, Intent contentIntent)
    {
        this.when = when;
        this.icon = icon;
        this.tickerText = tickerText;
        setLatestEventInfo(context, contentTitle, contentText,
                PendingIntent.getActivity(context, 0, contentIntent, 0));
    }

1.相対的

relativeプロパティは比較的シンプルです。どのオブジェクトから相対的にオフセットされているかを把握する必要がある。答えは、それ自身の位置です。上のコードでは、sub1とsub2は兄弟であり、sub1にrelative属性を設定すると、例えば以下のようなCSSコードになる。

Intent intent = new Intent(this,MainActivity);  
PendingIntent pendingIntent = PendingIntent.getActivity(context, 0, intent, PendingIntent.FLAG_ONE_SHOT);  
notification.setLatestEventInfo(context, title, message, pendingIntent);          
manager.notify(id, notification);  

relativeプロパティが設定されていない場合、通常のドキュメントフローに従ってsub1の位置はある位置にあるべきと理解できる。しかし、sub1の位置がrelativeに設定されていると、top, right, bottom, leftの値に基づいて、あるべき位置に移動することになります。

この場合、relativeを設定しなければsub1があるべき場所にあり、設定すればあるべき場所に移動すると覚えておけばよいでしょう。

続く問題は、sub2はどこにあるのか、ということです。答えは、元いた場所と今いる場所であり、sub1がpositionプロパティを追加しているので位置は変わりません。

sub2の位置もrelativeにするとどうなるのでしょうか？sub1と同じように、本来あるべき位置からオフセットされたままです。

なお、relativeのオフセットは、オブジェクトのマージンの左上端を基準にしています。

2. 絶対

このプロパティは常に誤解を招きます。position属性がabsoluteに設定されると、常にブラウザのウィンドウに従って位置が決まるというのは間違いです。実際には、これはfixedプロパティの機能です。

sub1のpositionがabsoluteに設定されているとき、具体的に誰によってオフセットされているのでしょうか？ここには2つのケースがあります。

(1) sub1の親オブジェクト（親オブジェクトであれば曾祖父でも可）のparentにもpositionプロパティが設定されていて、positionプロパティの値がabsoluteまたはrelativeである場合、つまりデフォルト以外の場合は、sub1はこの親に従って位置決めを行う。

オブジェクトが定義されていることに注意してください。しかし、注意が必要な点があります。それは、親のどの位置ポイントを位置決めに使用するかということです。親が margin や border、padding などを持っている場合、この軌跡は padding を無視して、padding が始まるところから（つまり、padding の左上隅からのみ）位置決めされる、つまり、padding は無視するが margin と border は無視する。

次の問題は、sub2の位置はどこに行くのか、ということです。なぜなら、positionがabsoluteに設定されると、sub1はあたかも親の一部でないかのように、ドキュメントの通常の流れからはみ出し、浮いてしまうからです。これはDreamWeaverでは"layer"と呼ばれていますが、同じ意味合いです。この時点でサブ2はサブ1の位置になり、そのドキュメントフローはもはやサブ1を基準としたものではなく、直接親から始まることになります。

(2) sub1がpositionプロパティを持つ親オブジェクトを持たない場合、bodyを位置決めオブジェクトとして使用し、ブラウザウィンドウに従って位置決めする、この方法が分かりやすいでしょう。

3.固定

fixedは特殊なabsoluteで、ブラウザのウィンドウに合わせて常にボディに配置され、スクロールバーをドラッグしてもその位置は変わりません。background-attachment:fixedと同様です。

もちろん、Dreamweaverではサポートされていないようです

4.静的

positionのデフォルト値。positionプロパティが設定されていない場合、一般的に通常のドキュメントフローに従います。

概要

以上、htmlのpositionの使い方を紹介しましたが、お役に立てれば幸いです。何か質問があれば、メッセージを残してください。皆さん、スクリプトハウスのホームページをよろしくお願いします。