상대 위치 지정 및 절대 위치 지정의 CSS 예_CSS/HTML

.a, .b, .c, .d, .e
{
너비: 100px;
높이: 100px;
여백: 5 자동;
색상: #fff ;
배경: #000;
}
.aa, .bb, .cc, .dd, .ee
{
위쪽: 10px;
왼쪽: 10px;
너비: 10px;
높이: 10px;
오버플로: 숨김;
배경: #F90;
}
.b, .d, .e
{위치: 상대; }
.cc, .dd, .ee
{위치: 절대;}

A: 위치가 설정되지 않았습니다. 일반적인 중첩 관계는
< ; /div>

B: 외부 div만 상대적이고 일반적인 중첩 관계로 설정됩니다.
< ;/div>

C: 내부 div만 절대값으로 설정되고 문서는 중첩됩니다. 관계, 페이지 내부 div는 부동(비부동)이며 페이지를 기준으로 위치가 지정되며 외부 div와 아무 관련이 없습니다.

.a, .b, .c, .d, .e
{
너비: 100px;
높이: 100px;
여백: 5 자동;
색상: #fff ;
배경: #000;
}
.aa, .bb, .cc, .dd, .ee
{
위쪽: 10px;
왼쪽: 10px;
너비: 10px;
높이: 10px;
오버플로: 숨김;
배경: #F90;
}
.b, .d, .e
{위치: 상대; }
.cc, .dd, .ee
{위치: 절대;}

A: 위치가 설정되지 않았습니다. 일반적인 중첩 관계는
< ; /div>

B: 외부 div만 상대적이고 일반적인 중첩 관계로 설정됩니다.
< ;/div>

C: 내부 div만 절대값으로 설정되고 문서는 중첩됩니다. 관계, 페이지 내부 div는 부동(비부동)이며 페이지를 기준으로 위치가 지정되며 외부 div와 아무 관련이 없습니다.

D: 외부 div는 다음으로 설정됩니다. 상대적이고 내부 div는 상대적으로 설정됩니다. div는 절대값으로 설정되고 내부 div는 부동하며 외부 div를 기준으로 위치가 지정됩니다

D: 외부 div는 상대 div로 설정되고 내부 div는 상대 div로 설정되며 내부 div는 외부 div를 기준으로 부동 및 위치 지정됩니다

E: 이것은 설명하기 위한 것입니다. 경계 문제 . -10 != 역방향 10픽셀 간격