、5の合計に分割静的、相対的、絶対的な、固定され、継承され、デフォルトでは、静的です
相対的、相対的な位置、親要素の相対的な位置
<！DOCTYPE HTML> <HTML LANG = " EN " > <HEAD> <メタ文字コード= " UTF-8 " > <タイトル>相对定位</ TITLE> <スタイル> .rel { 幅：100pxに。 高さ：100pxに。 位置：相対; 背景 - 色：青; 左：100ピクセル; } .rel2 { 幅：100pxに。 高さ：100pxに。 位置：相対; 背景 - 色：赤; 上：50px; 左：100ピクセル; } </スタイル> </ HEAD> <BODY> <divのクラス = " REL " > </ div> <divのクラス = " REL2 " > </ div> <div>の</ div> </ body> </ htmlの>
ウィンドウの左上隅を基準絶対絶対位置、
<！DOCTYPE HTML> <HTML LANG = " EN " > <HEAD> <メタ文字コード= " UTF-8 " > <タイトル>绝对定位</ TITLE> <スタイル> .POS { 幅：300ピクセル; 高さ：300ピクセル; / * 位置：絶対; * / 背景：青; } .pos2 { 幅：100pxに。 高さ：100pxに。 位置：絶対; 背景：赤; / * 左：200pxの。* / 右：100ピクセル; 高さ：3000px; } </スタイル> </ HEAD> <BODY> <divのクラス = " POS " > <divのクラス = " POS2 " > </ div> </ div> </ BODY> </ HTML>
固定された固定位置に関係なく、ブラウザのウィンドウ内の固定位置に固定される方法高いです
<！DOCTYPE HTML> <HTML LANG = " EN " > <HEAD> <メタ文字コード= " UTF-8 " > <タイトル>固定定位</ TITLE> <スタイル> .fix { 幅：100％; 高さ：100pxに。 位置：固定; 背景：青; 左：0PX。 下：0PX。 } 本体{ 高さ：3000px。 } </スタイル> <スタイル> .bro { 幅： 高さ： 背景：黒; 背景：黒; 位置：絶対; 位置：絶対; 左：300ピクセル; 左：300ピクセル; トップ：0PX。 トップ：0PX。 } } .TEST { .TEST { 幅：100pxに。 幅：100pxに。 高さ：100pxに。 高さ：100pxに。 背景：黄色; 背景：黄色; 位置： 位置：固定; 左：100ピクセル; トップ：100ピクセル; } </スタイル> </ HEAD> <BODY> <divのクラス = " 修正" > </ div> <divのクラス = " 仲間" >固定; 左：100ピクセル; トップ：100ピクセル; } </スタイル> </ HEAD> <BODY> <divのクラス = " 修正" > </ div> <divのクラス = " 仲間" <divのクラス = " テスト" > </ div> </ div> </ BODY> </ HTML>
親要素の位置の位置を継承継承
<！DOCTYPE HTML> <HTML LANG = " EN " > <HEAD> <メタ文字コード= " UTF-8 " > <タイトル>固定定位</ TITLE> <スタイル> .fix { 幅：100％; 高さ：100pxに。 位置：固定; 背景：青; 左：0PX。 下：0PX。 } 本体{ 高さ：3000px。 } </スタイル> <スタイル> .bro { 幅： 高さ： 背景：黒; 位置：絶対; 左：300ピクセル; トップ：0PX。 } .TEST { 幅：100pxに。 高さ：100pxに。 背景：黄色; 位置：固定; 左：100ピクセル; トップ：100ピクセル; } </スタイル> </ HEAD> <BODY> <divのクラス = " 修正" > </ div> <divのクラス = " 仲間" > <テスト" > </ div> </ div> </ BODY> </ HTML>
レイアウトの途中でログを連絡します
<！DOCTYPE HTML> <HTML LANG = " EN " > <HEAD> <メタ文字コード= " UTF-8 " > <タイトル>ログインセンター</ TITLE> <スタイル> の.login { 幅：200pxの。 高さ：200pxの。 左：50％; トップ：50％; 位置：固定; マージン -top： - 100ピクセル。 マージン -left： - 100ピクセル。 背景：青; } .loginファイル.TITLE { 位置：相対。 幅：100％; 高さ：15ピクセル; パディング：5pxの0PX 5pxの0PX。 トップ：0PX。 背景：黄色; Z -index： - 1 。 } の.login .close { 幅：10pxの。 高さ：自動; 背景：赤; postion：相対; マージン -top： - 20ピクセル; マージン - 左：190px; Z -index：3 。 カーソル：ポインタ; } </スタイル> <スクリプトタイプ= " テキスト/ javascriptの" > 機能closeXXX（）{ 警告（" 私は近いよ" ） } 関数titleXXX（）{ 警告（" 私はタイトルだ" ） } </ SCRIPT> </ヘッド> <身体> の<div クラス = " ログイン" > <divのクラス = " タイトル"" > 私は午前のタイトル </ div> <divのクラス = " 閉じる" onclickの= " closeXXX（）" > X </ div> </ div> </ BODY> </ HTML>