ホームページ > 記事 > ウェブフロントエンド > css_html/css_WEB-ITnose の 5 つの位置属性を理解する
css_html/css_WEB-ITnose の 5 つの位置属性を理解する
- WBOYオリジナル
- 2016-06-24 11:32:49948ブラウズ
位置を使用したページ レイアウトの実際の開発では、位置指定されたブロック レベル要素のネストの効果がよくわかりません。ここでいくつかのテストを示します
一般に、w3c 定義で簡単に取得できます。 :
static: デフォルト値。位置決めを行わない場合、要素は通常のフローで表示されます (上、下、左、右、または z-index 宣言は無視されます)。
修正: ブラウザ ウィンドウを基準にして配置された絶対位置の要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
inherit:position 属性の値を親要素から継承することを指定します。
absolute: 静的配置以外の最初の親要素を基準にして配置される絶対配置要素を生成します。要素の位置は、「left」、「top」、「right」、「bottom」属性によって指定されます。
relative: 通常の位置を基準にして相対的に配置された要素を生成します。したがって、「left:20」は要素の LEFT 位置に 20 ピクセルを追加します。
一般:
静的 は、通常のドキュメント フローの順序です。デフォルトは、位置決めがないことに相当します。
fixed は、ブラウザ ウィンドウに対して相対的なものであり、スクロール バーのスクロール方法と同じです。ウィンドウに「接着」されたように、まだ同じ位置にあります!
inherit は親要素から継承されたposition 属性の値、
absolute はドキュメントフローからの元の位置です。親要素内に位置決めされた要素がある場合、それが絶対的か相対的かに関係なく、その親要素に相対的に位置決めされます。親要素内に位置決めされた要素がない場合は、相対的に位置決めされます。その親要素は本体に対して相対的に配置されます。言い換えれば、絶対に参照があります!
relative は、ドキュメント フローの元の位置から離れず、それを占有し続けます。
最初の 3 つは、絶対の場合は理解しやすく、いくつかのテストを行いました。相対を組み合わせて使用する
テスト（絶対と相対）
1. 絶対と相対を単独で
2. 相対で相対、絶対で相対
3. 絶対で絶対、相対で絶対
<!DOCTYPE html><html><head> <title>position -- absolute -- relative</title></head><style> .test-a{ position: absolute; top:20px; left:60px; width:200px; height: 100px; background: red; } .test{ width:400px; height: 100px; background: green; } .test-r{ position:relative; top:50px; left:130px; background: yellow; width:160px; height: 180px; } .test-rr{ position: relative; top: 20px; left: 100px; width: 600px; height: 300px; background: blue; } .test-aa{ position: absolute; top: 24px; left: 34px; background: orange; } .test-aaa{ position: absolute; top: 24px; left: 34px; width:400px; height:200px; background: #18E457; } .test-aaaa{ position: absolute; top: 124px; left: 134px; width:400px; height:200px; background: yellow; } .test-rrr{ position: relative; top: 24px; left: 34px; width:400px; height:200px; background: yellow; } .test-rrr{ position: relative; top: 124px; left: 134px; width:400px; height:200px; background: red; } .test-r-a{ position: absolute; top: 124px; left: 134px; width:800px; height:800px; background: yellow; } .test-a-r{ position: relative; top: 124px; left: 134px; width:700px; height:700px; background: red; }</style><body> <div class="test-a">absolute</div> <div class="test">分割</div> <div class="test-r">relative</div> <h2 >结合使用</h2> <p>parentNode的position不是relative或absolute,那absolute的绝对对象是针对body的 parentNode的position 是relative或absolute,那absolute的绝对对象是针对parentNode的 也就是说absolute的绝对是有参照Node的 </p> <div class="test-rr"> absolute外的relative <div class="test-aa"> relative内的absolute，，，里面这个div是相对外面那个div定位的 </div> </div> <div class="test-aaa"> absolute外的absolute <div class="test-aaaa"> absolute内的absolute,,,,,,,,里面这个div是相对外面那个div定位的 </div> </div> <div class="test-rrr" > relative外的relative <div class="test-rrrr"> relative内的relative,,,,,,,,里面这个div是相对原来位置定位的 </div> </div> <div class="test-r-a"> relative外的absolute <div class="test"> <div class="test-a-r"> relative内的absolute，，，里面这个div是相对原来位置定位的 </div> </div> </div></body></html> 実際、インターネット上での経験は、実際に実践してみないと本当に理解できないことが多いです。