position : static, relative, absolute

5268 ワード
CSS テキストリンク 
<body>
    <div class="outer">
        <div class="box box1">
            <div class="inner inner1">inner1</div>
            <div class="inner inner2">inner2</div>
        </div>
    </div>
</body>

static

.box1 .inner1{
	position: static;
    	top: 30px;
	left: 100px;
}

  • 位置を指定せずに自動的に静的になるデフォルト

  • 使用位置に関する프로퍼티(top, left, right..등)もXに影響を与える

  • もとの場所

    • relative

    .box1 .inner1{
	position: relative;
    	top: 30px;
	left: 100px;
}

  • 既存の位置(赤)を維持し、位置に関する専門知識の影響を受ける

  • 上から30 px、左から100 px

    • absolute

    .box {
	position: relative;
}
.box1 .inner1{
	position: absolute;
    	top: 30px;
	left: 100px;
}

  • 近距離の親の中で、position이 static이 아닌 부모의 기준で行動します.

  • 元の位置を維持せず、inner 2はinner 1の位置に上昇する


  • 近い親の中でstatic이 아닌 부모가 없다면 bodyを基準に移動

    • Leetcode128——Longest Consecutive Sequence
    Leetcode Algorithm 1480