먼저 예 보기:
구조:
< /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)의 위치로 이동합니다. 공간을 차지하지 않습니다.
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
