1. はじめに

2.4.1 説明

1.2 主な値

1.3 補助属性

2. 位置配置方法

2.1 Position:absolute

2.3.2 View

2.2 Position:relative

2.3 Position:fixed

2.4.2 アプリケーションシナリオ

2.4 Position:static

3. まとめ

3.1 スクロールバーの表示の有無

3.2 例

3.2.1 表示

3.2.2 コード

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSS Position 配置プロパティ

高洛峰

Feb 10, 2017 pm 03:44 PM

この記事では主に要素の Position 属性について紹介します。この属性はページ上での要素の配置方法を設定できます。

1. はじめに

1.1 説明

Position 属性: 要素の配置タイプを指定します。つまり、要素はドキュメントフローのレイアウトから分離され、ページ上の任意の場所に表示されます。

1.2 主な値

①absolute: ドキュメントフローのレイアウトのうち、残りのスペースは後続の要素によって埋められます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。

②relative: 相対的な配置。ドキュメントフローのレイアウトから離脱せず、独自の位置のみを変更し、ドキュメントフローの元の位置に空白領域を残します。配置の開始位置は、ドキュメントフロー内のこの要素の元の位置です。

③fixed: 固定位置。絶対位置と似ていますが、スクロールバーの移動に応じて位置は変わりません。

④static: デフォルト値。デフォルトのレイアウト。

1.3 補助属性

position 属性は、要素をドキュメントフローから取り出すだけで、この要素を希望の位置に表示したい場合は、次の属性を使用する必要があります (position: static はこれらをサポートしていません)。

①left: 要素の左側に何ピクセル挿入し、要素を右側に移動するかを表します。

②right: 要素の右側に何ピクセル挿入するか、要素を左側に何ピクセル移動するかを示します。

③top: 要素の上に挿入するピクセル数と、要素を下に移動するピクセル数を示します。

④bottom: 要素の下に挿入するピクセル数と、要素を上に移動するピクセル数を示します。

上記の属性の値は負の値になる可能性があります (単位: px)。

2. 位置配置方法

2.1 Position:absolute

2.1.1 説明

ドキュメントフローのレイアウトのうち、残りのスペースを後続の要素で埋めます。位置決めの開始位置は最も近い親要素 (位置は静的ではありません) であり、それ以外の場合は本文ドキュメント自体です。

2.1.2 View

CSS Position 定位属性

2.2 Position:relative

2.2.1 説明

相対位置はドキュメントフローのレイアウトから離脱せず、空白領域を残して独自の位置を変更するだけです。ドキュメントフローの元の位置にあります。配置の開始位置は、ドキュメントフロー内のこの要素の元の位置です。

2.2.2 View

CSS Position 定位属性

2.3 Position:fixed

2.3.1 説明

絶対位置と同様に固定位置ですが、スクロールバーが移動しても位置は変わりません。

2.3.2 View

CSS Position 定位属性

2.3.3 アプリケーションシナリオ

①ログインボックスオーバーレイ: dzフォーラムのログインなど。

②偽のQQメッセージ広告。

2.4 Position:static

2.4.1 説明

デフォルトの配置。この要素がデフォルトの配置方法であることを示します。

2.4.2 アプリケーションシナリオ

IE6 の特殊な処理。

3. まとめ

3.1 スクロールバーの表示の有無

position属性を含む要素がエッジ要素の場合:

①absoluteとrelative: これら2つの値を含むエッジ要素は、ブラウザはこの要素に縮小されません。表示されている場合は、スクロールバーが表示されます。

②修正: この値を含むエッジ要素の場合、この要素が見えなくなるまでブラウザをズームアウトすると、スクロールバーが表示されなくなります。

3.2 例

3.2.1 表示

CSS Position 定位属性

3.2.2 コード

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
    <title>position</title>
    <style type="text/css">
        p        {
            height: 200px;
            width: 300px;
            border-color: Black;
            border-style: solid;
            border-width: 1px;   
         }
        
         #a        {
            position:absolute;
            left:900px;
            top:150px;
        }
        #b        {
            position:relative;
            left:500px;
            top:100px;
        }
        #c        {
            position:fixed;
            left:970px;
            top:400px;
         }
         #d         {
            position:static;    
            background-color:Window;    
         }

    </style></head><body>　　<p id="a" >　　　　p-a<br />　　　　position:absolute;<br />　　　　绝对定位；脱离文档流，遗留空间由后续元素填充。
　　</p>　　<p id="b" >　　　　p-b<br />　　　　position:relative;<br />　　　　相对定位；不脱离文档流，只改变自身的位置，在文档流原先的位置遗留空白区域。
　　</p>　　<p id="c" >　　　　p-c<br />　　　　position:fixed;<br />　　　　固定定位；固定在页面中，不随浏览器的大小改变而改变位置。
　　</p>　　<p id="d"></p>　　<input type="text" value="input1" /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /></body></html>

ログイン後にコピー

CSS Position 位置決め属性に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。