フロントエンドの開発CSS位置決め要素のpostion：究極の秘密の相対/絶対差

postion元素：相対/絶対：*

CSSターゲティングにおける相対的および絶対的共通プロパティです。ここでは、相対と絶対の違いを見つけることです。そして、どのようにサブ親状況で良いポジショニングを作るには？

次のように最初のコードはある
HTMLコードを

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=\, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>定位的几种用法</title>
    <link rel="stylesheet" href="./example1.css">
</head>
<body>
    <div class="wrapper">
    <div class="superfather">
       <span>我是爷爷</span> 
    <div class="father">
        <span>我是爷爷的儿子爸爸</span>
        <div class="son1">
            <span>我是爸爸的儿子1</span>
        </div>
        <div class="son2">
           <span>我是爸爸的儿子2</span> 
        </div>
    </div>
    </div>
    </div>
</body>
</html>

CSSコード

*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;    
}
.wrapper{
    height: 700px;   
    width: 1900x;
   background-color: white;
   padding-top: 20px;
   
}
.father{
     height: 200px;   
     width: 400px;
    background-color: green;
    padding-top: 20px;
    
}
.son1{
    height: 100px;   
    width: 200px;
   background-color:red;
   
}
.superfather{
    height: 300px;   
    width: 500px;
   background-color:yellow;
   margin: 0 auto;
}
.son2{
    height: 100px;   
    width: 200px;
   background-color:gray;
   
}

図の効果として、ここに画像を挿入説明

最初のステップ：absouteプラス左上のプロパティのための1位の息子を変更属性
：レンダリングここに画像を挿入説明
発見この時点では、位置決め基準点の息子は、ブラウザの左上隅です

ステップ2：お父さんのプロパティを与えるプラス絶対/相対位置をすることができここに画像を挿入説明
、この時点で、見つけました。位置決め基準点サブクラス変更は、彼が親クラスの左上隅です！！！
私たちは、私の祖父が起こる増加しようとするどのような位置、父の位置をキャンセル？
何postionプロパティの例を持っていない限り、その親クラスのすべてがpostionプロパティを持っているとして、それは親クラスの左上に配置されます直接の親クラスに息子1を見ることができます！

相対および絶対差：第二工程

それらの相対位置に基づいて
絶対位置ブラウザ点位置の左上隅を基準依然として親クラス（親下の事情がある場合）に基づく、そうでない場合です。

父はpositionプロパティを持っている場合1.は、息子1positionプロパティは、いつものように、まだ親クラスに基づいて配置され、絶対的です。
親クラスに基づいて、息子1position特性が相対見出され、それらの位置は、位置に基づいていない場合には2 ここに画像を挿入説明

第三：なぜ親クラスは、相対abosluteそれを使用するサブクラスを持っているのですか？
相対的な位置付けを持つ親は、その位置に基づいており、簡単にブラウザで場所を変更することができます。
そして、サブクラスは親クラスは、サブクラスが変更に追従するときabosulteベースのポジショニングを持つ親クラスは、位置が変化しています。