절대 포지셔닝

CSS는 가장 가까운 포지션 컨테이너에 비해 요소를 배치하는 절대 포지셔닝 (위치 : 절대)을 사용하여이를 달성 할 수 있습니다. 부모가없는 경우, 요소는 브라우저 창에 대해 위치됩니다. 위치 : 상대; 높이 : 100px; } #상자 { 위치 : 절대; 상단 : 50px; 왼쪽 : 20px; }

이 예에서 #box 요소는 상단에서 50px로, #container parent의 왼쪽에서 20px로 배치됩니다. 위치가없는 부모가 없으면 브라우저 창에 대한 요소가 배치됩니다.

혜택 :

#container {
  position: relative;
  height: 100px;
}

#box {
  position: absolute;
  top: 50px;
  left: 20px;
}

는 필요하지 않습니다.

. javaScript

Quirks 모드 고려 사항 :

• ELEMENTS.
• 마진과 패딩은 Quirks 모드에서 다르게 행동 할 수 있습니다.

위치에 대한 일관성있는 교란 및 이름 지정 규칙을 사용합니다. 별도의 스타일 시트 또는 기본 스타일 시트의 전용 섹션에 있습니다.

추가 제어 및 유연성을 제공하므로 더 복잡한 레이아웃에 CSS 그리드 또는 Flexbox를 사용하는 것을 고려하십시오.