HTMLアンカー - 絶対的および相対的な位置決め、固定位置

1、絶対位置

絶対配置は、水平および垂直の要素に固定されたHTML要素によって所定位置を指すスペースを占有しない要素の絶対位置に基づきます。

ポジションステートメント絶対位置は、位置関係を基準とし、最新の祖先要素が含まれています。現在の要素が祖先要素として必要とされている場合は、Webページ全体に対する基準値としてターゲットにされていません。

位置：絶対;

1 <！DOCTYPE HTML>

2 <HTML LANG = "EN">

4  < ヘッド> 
5      < メタのcharset = "UTF-8" > 
6      < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0" > 
7      < メタHTTP-当量= "X-UA互換」コンテンツ= "IE =縁" > 
8      < タイトル>定位和布局</ タイトル> 
9  </ ヘッド> 
10  < スタイル> 
11      。大きな{ 
12          幅：900px ; 
13          高さ：600PX 。
14          背景色：黒。
15          位置：相対。
16      } 
17  
18      .box4 { 
19          幅：150ピクセル。
20          高さ：100pxに。
21          背景色：青。
22           位置：絶対。
23          トップ：150ピクセル; 
24は         左：200pxの。 
25      } 
26  </ スタイル> 
27  < ボディ> 
28      < DIV クラス= "大きな" > 

29          < DIV クラス= "box4" > </ DIV > 
30      
31      </ DIV > 
32  </ ボディ> 
33  
34  </ HTML >

示されるように提供されるいかなる外側位置決め青いボックス大きな箱のパッケージが存在しない場合、青いボックスは、しかしながら、全体ボックス用語に対して大きい、青色ボックスは逆の絶対画面全体に配置されます。

2、の相対位置

位置：相対;

絶対位置と相対位置との間の違いは、原点の基準点の左上隅が、素子自体元の開始位置ではないということです。そして、要素を新しい場所に移行された場合でも、だけでなく、オリジナルの出発点からスペースを占有し続けています。

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
    < メタ文字コード= "UTF-8" > 
    < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
    < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
    < タイトル>定位和布局</ タイトル> 
</ ヘッド> 
< スタイル> 
    。900px ; 
        高さ：600PX 。
        背景色：黒。
        位置：相対; 
    } 
    
    .box1 { 
        幅：150ピクセル。
        高さ：100pxに。
        背景色：アクア; 
        位置：相対; 
        左：100ピクセル; 
        トップ：10pxの; 
    } 
    
    .box2 {
        幅：150ピクセル; 
        高さ：100pxに。
        背景色：赤。
        / * 位置：相対; * / 
        左：130px ; 
        下：は50px ; 
    } 
    
    .box3 { 
        幅：150ピクセル。
        高さ：100pxに。
        背景色：黄色; 
        / * 位置：相対; * / 
        左：170px; 
        下：100pxに。
    } 
    
    .box4 { 
        幅：150ピクセル。
        高さ：100pxに。
        背景色：青。
        位置：絶対; 
        トップ：150ピクセル; 
        左：200pxの。
    } 
 
    
    .box6 { 
        幅：150ピクセル。
        高さ：100pxに。
        背景色：RGB（27、173、83） 。
    } 
</ スタイル> 

< 身体> 

    < divのクラス= "ビッグ" > 
        < divのクラス= "BOX1" > </ divの> 
        < divのクラス= "BOX2" > </ divの> 
        < divのクラス= "BOX3" > </ DIV > 
        < DIV クラス= "box4" > </ divの> 
        < divのクラス= "box5" > <
        = "box6" > </ DIV > 
    </ DIV > 
</ ボディ> 

</ HTML >

私たちの3番目のボックスには、黄色のボックスは、例えば、我々はその相対的な位置決めをコメントアウトします。この時点で、その動作結果がこれです。

我々は彼の相対的な位置に追加すると、位置：相対;それは動作していることの結果は、ある基準とし、自身の元の位置が動いたときに右方向に、しかし、それは以下の緑色のボックスを上に移動しないていました、つまり、位置を占めます相対的な位置を使用して、固定位置決めがないちょうど黄色のボックスと緑のボックスで、その場所を占有し、例えば、黄色のボックスが黄色のボックスを除去した後、彼を見つけるために絶対位置を使用する場合は、緑色のボックスには、以前に黄色のボックスで占める位置を上に移動します。

図3に示すように、固定された位置

位置：固定;

固定位置は、常にブラウザウィンドウに対して配置され、固定された位置は、ブラウザの特定の位置に固定されるスクロールバーをスクロールしないであろう。あなたはそれを失った場合、小さなポップアップ広告ではありませんコンピュータは、悪くないし、Webページを表示するために、マウスをスライドさせたときに、最も一般的なのは、小さな広告が常に存在します、だけでなく、一般的に使用されるが、ウェブサイトまたはAPPの下部にある選択バーとナビゲーションバーで、あります。