ポジションの概要attribute_html/css_WEB-ITnose-htmlチュートリアル-php.cn

ポジションの概要attribute_html/css_WEB-ITnose

WBOY

リリース： 2016-06-24 11:58:32

オリジナル

1205 人が閲覧しました

position 属性は要素の配置タイプを指定します

この属性は、要素のレイアウトを確立するために使用される配置メカニズムを定義します。任意の要素を配置できますが、絶対要素または固定要素は、要素自体のタイプに関係なく、ブロックレベルのボックスを生成します。相対的に配置された要素は、通常のフローではデフォルトの位置からオフセットされます。

値説明

absolute 絶対配置	静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
fixed 固定配置	ブラウザウィンドウを基準にして絶対配置された要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
relative 相対配置	通常の位置を基準にして相対的に配置された要素を生成します。つまり、「left:20」は要素の左の位置に 20 ピクセルを追加します。
静的	デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。
inherit	Position 属性の値を親要素から継承することを指定します。

画像をオーバーレイするために z-index とともに使用します。デフォルトの z-index は 0 です。値は小さいものから大きいものへと増加し、優先順位は増加します (つまり、表面上の要素が最も高い優先順位になります)

上記は W3C の位置定義から引用したものです

情報を探して調べた結果、以下の点をまとめました:

1. 静的、継承: そうですね、喜んで無視することにしました (汗!!!)。

2. 固定: ブラウザーの表示部分に対する相対的な配置 (ブラウザーに応じて)

3. 相対的な配置 (要素自体の通常の位置に応じて)

4. : 位置属性が静的ではない最初の親要素を基準とした位置決め (これは実際には畳み込みであり、これは最初は理解できなかったことです。親要素に位置属性がない場合、または位置属性がすべて静的、体の位置に依存します)

もちろん、コンテンツ、パディング、ボーダーとマージンの四大王もあります。覚えておいてください、absolute は content+apdding (つまり、パディングが開始される位置) に基づいて配置されます

<html>    <head>        <style type="text/css">            .div1{                position: relative;                border: 10px solid red;                padding: 10px;                width: 100px;                height: 100px;                background-color: green;                background-clip: content-box;            }            .div2{                positon: absolute;                width: 50px;                height: 50px;                background-color: yellow;                left: 10px;//此处left会以padding开始定位            }        </style>    </head>    <body>        <div class='div1'>div1            <div class='div2'>div2</div>        </div>    </body></html>

ログイン後にコピー

Rendering:

実験中に落とし穴が発見されました。！！！！！上記のコードで left を margin に変更するとどうなりますか?

属性が 1 つだけ変更されていますが、コードを添付しましょう:

 1 <html> 2     <head> 3         <style type="text/css"> 4             .div1{ 5                 position: relative; 6                 border: 10px solid red; 7                 padding: 10px; 8                 width: 100px; 9                 height: 100px;10                 background-color: green;11                 background-clip: content-box;12             }13 14             .div2{15                 positon: absolute;16                 width: 50px;17                 height: 50px;18                 background-color: yellow;19                 margin: 10px;20             }21         </style>22     </head>23 24     <body>25         <div class='div1'>div126             <div class='div2'>div2</div>27         </div>28     </body>29 </html>

ログイン後にコピー

まだレンダリング中です:

margin 属性は親要素のコンテンツに基づいています。

うーん、次回は騙されないでください。