CSS 위치 지정

먼저 예 보기:

구조:

기본 위치

　　

고정 위치

　　

< /div>

스타일:

*{padding: 0;margin: 0;}

.static{width:300px;height: 300px;}
.relative{margin:50px 50px;width: 200px;height: 200px;position: 상대;상단: 50px;}
.absolute{위치: 절대;상단: 0;왼쪽: 0;너비: 100px;높이: 100px;}
.fixed{위치: 고정;상단: 0;왼쪽: 0;너비: 100px;높이: 100px;}

렌더링:

요약!

요소의 수직 및 수평 위치를 설정하여 다음을 수행할 수 있습니다.

1. 상대 위치 지정: 요소는 시작점을 기준으로 이동합니다. 그림의 요소가 시작점을 기준으로 50px 아래로 이동했습니다. 원래 공간을 차지합니다.

2. 절대 위치 지정: 요소는 상위 요소(또는 가장 가까운 위치에 있는 상위 요소)를 기준으로 이동합니다. 다이어그램에서 요소의 왼쪽 위 모서리 좌표는 해당 상위 요소와 일치합니다. 공간을 차지하지 않습니다.

3. 고정 위치 지정: 요소가 뷰포트를 "기준으로" 이동합니다. 그래프의 요소는 좌표(0,0)의 위치로 이동합니다. 공간을 차지하지 않습니다.