day6相対位置：位置：相対

相対的な位置：位置：相対

特徴は、参照としてその左上隅と、元の位置に位置決め相対:.します。

B。元の位置の相対的な位置決めがまだ位置であると考えられる、その現象をフローティング表示されません。

以下は、最初の位置:(設定位置とマージンとの間の差）ことがわかります

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>相对定位</ TITLE> 
    <スタイル> 
* { 
  マージン：0; 
  パディング：0; 
} 
.top { 
    高さ：100pxに。
    幅：100ピクセル; 
    マージン：は50px; 
    背景色：ピンク; 
    / *位置：相対; 
    トップ：100ピクセル; 
    下：100pxに。* / 
} 
 / * .bottom { 
    高さ：100pxに。
    幅：120ピクセル; 
    背景色：黄色; 
} * /
    </スタイル>
</ HEAD> 
<BODY> 
    <DIV CLASS = "トップ"> </ div> 
    <DIV CLASS = "底"> </ div> 
</ body> 
</ HTML>

　次のような効果があります

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>相对定位</ TITLE> 
    <スタイル> 
* { 
  マージン：0; 
  パディング：0; 
} 
.top { 
    高さ：100pxに。
    幅：100ピクセル; 
    マージン：は50px; 
    背景色：ピンク; 
    / *设定相对位置* / 
    位置：相対。  
    トップ：100ピクセル; 
    下：100pxに。
} 
 / * .bottom { 
    高さ：100pxに。
    幅：120ピクセル; 
    背景色：黄色;
} * / 
    </スタイル>
</ HEAD> 
<BODY> 
    <DIV CLASS = "トップ"> </ div> 
    <DIV CLASS = "底"> </ div> 
</ body> 
</ HTML>

の相対位置を設定した後、図の効果：

頂部の相対位置を設定する、底設定されていないターゲティング。

初期状態は以下のとおりです。

<！DOCTYPE HTML> 
<HTML LANG = "EN"> 
<HEAD> 
    <メタ文字コード= "UTF-8"> 
    <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> 
    <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> 
    <タイトル>相对定位</ TITLE> 
    <スタイル> 
* { 
  マージン：0; 
  パディング：0; 
} 
.top { 
    高さ：100pxに。
    幅：100ピクセル; 
    背景色：ピンク; 
    / *设定相对位置
    位置：相対。  
    トップ：100ピクセル; 
    下：100pxに。* / 
} 
 .bottom { 
    高さ：100pxに。
    幅：100ピクセル; 
    背景色：黄色; 
}   
    </スタイル>
</ HEAD> 
<BODY> 
    <DIV CLASS = "トップ"> </ div> 
    <DIV CLASS = "底"> </ div> 
</ body> 
</ HTML>

　次のような効果があります

セットの相対位置：

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>相对定位</ タイトル> 
    < スタイル> 
* { 
  マージン：0 ; 
  パディング：0 ; 
} 
.top { 
    高さ：100pxに。
    幅：100ピクセル; 
    背景色：ピンク; 
    / * 设定相对位置* / 
    位置：相対。  
    トップ：100ピクセル; 
    下：100pxに。
} 
 .bottom { 
    高さ：100pxに。
    幅：120ピクセル; 
    背景色：黄色; 
}   
    </ スタイル> 
</ ヘッド> 
< 身体> 
    < divのクラス= "トップ" > </ divの> 
    < divのクラス= "下" > </ DIV > 
</ ボディ> 
</ HTML >

次のような効果があります

おすすめ