Div CSS 절대 및 상대_경험 교환 간의 차이점 요약

둘 사이의 관계를 자세히 설명하려면 예를 먼저 살펴봐야 합니다.

다음은 인용 부분입니다.
nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

위치: 절대;

위쪽: 5px;

오른쪽: 20px;



위치: 절대;

왼쪽: 20px; >

위치: 절대;

위쪽: 5px;

왼쪽: 5px;

위치: 상대;

왼쪽: 150px;

1

2

>

4

5

패딩: 20px 0 0 20px;

위치:

절대
;

위치: 상대;

왼쪽: 200px; 높이:

위치: AbSolute;

오른쪽: 20px;


　

위치: 절대;

아래쪽: 20px;

왼쪽: 20px; >









절대: 절대 위치 지정, CSS 작성 방법 "위치: 절대;", 위치 지정은 다음과 같이 두 가지 상황으로 구분됩니다.

1. Top, Right, Bottom, Left가 설정되지 않은 경우, 위 예시에서 빨간색 부분(노란색 영역)을 원점으로 부모의 "콘텐츠 영역의 원점"을 기준으로 기본값이 설정됩니다. ​​부모에는 Padding 속성이 있으며 "원래 좌표점"과 "콘텐츠 영역 원점"이 다릅니다).

2. Top, Right, Bottom, Left가 설정되는 경우는 다음과 같은 2가지 경우가 있습니다.

(1) 상위에는 위치 속성이 없습니다. 브라우저의 왼쪽 모서리(즉, Body)는 위 예의 녹색 부분과 같이 Top, Right, Bottom 및 Left 속성에 의해 "원래 좌표점"으로 ​​위치됩니다.

　(2) 위 예시의 하늘색 부분과 같이 부모의 '원점 좌표'가 원점입니다.

상대: 상대 위치 지정, CSS 작성 방법 "위치: 상대;", 부모의 "콘텐츠 영역의 원래 지점"을 원점으로 참조하고, 부모가 없는 경우 "원본"을 사용합니다. Body의 콘텐츠 영역 포인트'를 원점으로 하여 Top, Right, Bottom, Left 속성에 의해 위치가 결정되며, 주황색 부분과 같이 '높이 확장 또는 점유' 기능을 가지고 있습니다. 위의 예.

위의 예와 설명을 통해 우리 주변에는 "NetEase 163 Free Shipping" 홈페이지 등 절대와 상대의 좋은 예가 많이 있다고 생각합니다. "(http://mail.163.com)에는 많은 응용 프로그램이 있습니다.

예제 코드는 IE5.5, IE6, FF1.5, Opera9에서 테스트를 통과했습니다.