CSS 포지셔닝

3485 단어 cssprogrammingbeginnerswebdev 
.box {
  position: relative;
}


HTML 요소의 위치는 정적, 상대, 절대 또는 고정일 수 있습니다. 그리고 최근에는 스티커가 믹스에 추가되었습니다.
CSS 속성 position으로 요소의 위치를 ​​설정할 수 있습니다.
position 속성은 top, right, bottom 및 left 속성과 함께 작동합니다. 나는 그것들을 좌표 속성이라고 부를 것입니다. 좌표 속성은 여백 속성과 같은 기능을 하며 다양한 유형의 위치 지정을 설명하기 시작하면 훨씬 더 이해하게 될 것입니다.

상대적 포지셔닝



위치 속성에 상대 값을 지정하여 요소를 상대적으로 배치할 수 있습니다.

.box {
  position: relative;
  top: 20px;
}


요소가 상대적으로 배치되면 원래 있어야 할 위치에서 0px만큼 이동합니다. 이는 새 위치가 이전 위치에 상대적임을 의미합니다. top: 20px 와 같은 좌표 속성을 추가하면 원래 위치에서 위쪽 여백이 20px가 되도록 이동됩니다.

새 위치로 이동할 때 주변의 요소가 새 위치에 맞게 조정되지 않습니다. 상대적으로 배치된 요소가 여전히 원래 위치에 있는 것처럼 동작합니다.

왼쪽 속성처럼 상대적으로 배치된 요소에 다른 좌표 속성을 추가할 수 있습니다.

.relative-box {
  position: relative:
  top: 20px;
  left: 30px
}


위의 코드 스니펫은 클래스relative-box가 있는 요소가 20px 아래로 이동하고 오른쪽으로 30px 이동하여 원래 위치에서 위쪽 여백이 20px이고 왼쪽 여백이 30px가 되도록 합니다.

상대적으로 배치된 요소에 top 속성을 추가하면 요소가 아래로 이동합니다. 왼쪽 속성을 추가하면 요소가 오른쪽으로 이동하며 다른 좌표 속성에도 동일하게 적용됩니다.

절대 위치



위치 속성에 절대 값을 지정하여 요소를 절대적으로 배치할 수 있습니다.

.absolute-box {
  position: absolute;
  top: 20px;
}


절대 위치 지정은 상대 위치 지정과 유사하게 작동합니다. 좌표 속성과 함께 작동합니다. 몇 가지 차이점이 있습니다.

절대 위치 지정과 상대 위치 지정의 차이점

Relatively positioned elements are positioned relative to their original position but absolutely positioned elements are positioned relative to the HTML's body tag(<body></body>).

If you don't set any top, left, bottom or right properties on .relative-box, the element will stay in its original position but if you don't set any of those properties on .absolute-box, you will find .absolute-box at the top-left corner of the page.

When you position an element absolutely, the other elements in the page will re-arrange themselves to adjust to the new position of the element in the page.



즉, 여백을 설정하기 위해 좌표 속성을 추가하면 요소에 해당 여백이 있지만 여백은 원래 위치가 아닌 페이지 가장자리에서 시작됩니다.

.absolute-box {
  position: absolute;
  top: 10px;
  left: 20px;
}


위의 코드 스니펫은 요소.absolute-box가 페이지 상단에서 10px의 상단 여백과 페이지 왼쪽에서 20px의 왼쪽 여백을 갖도록 만듭니다.

절대 위치 지정에는 또 다른 중요한 동작이 있습니다. 절대 위치 지정을 사용하여 다른 요소를 기준으로 요소를 배치할 수 있습니다.
.absolute-box의 부모가 상대적으로 배치된 경우 .absolute-box는 해당 부모를 기준으로 배치됩니다.
즉, .absolute-box는 부모의 위쪽 가장자리에서 위쪽 여백이 10px이고 부모의 왼쪽 가장자리에서 왼쪽 여백이 20px입니다.

요컨대 절대적으로 배치된 요소는 페이지 본문을 기준으로 하지만 상대적으로 배치된 상위 요소 내부에 있으면 해당 상위 요소를 기준으로 배치됩니다.

고정 위치




.fixed-box {
  position: fixed;
  top: 5px;
  left: 10px;
}


위치가 고정된 요소는 브라우저 창에 상대적인 위치에 배치됩니다. 페이지의 흐름에서 완전히 벗어나 페이지와 함께 스크롤되지 않습니다. 특정 지점에 고정된 상태로 유지됩니다.

클래스fixed-box가 있는 요소는 브라우저 창 상단에서 위쪽 여백이 5px이고 브라우저 창 왼쪽에서 왼쪽 여백이 10px입니다.

위쪽, 왼쪽, 아래쪽 또는 오른쪽 속성을 추가하지 않으면 브라우저 창의 왼쪽 상단 모서리에 fixed-box가 표시됩니다.

요소에 고정된 위치를 지정하면 페이지에서 제거되는 고정 요소에 대한 응답으로 페이지의 다른 요소가 다시 정렬됩니다.

정적 포지셔닝



모든 HTML 요소는 기본적으로 정적으로 배치됩니다. 정적은 페이지에서 HTML 요소의 기본 위치입니다.
flash 메시지 구현(비동기 통신)
Typescript, Vite 및 Vitest를 사용하여 최신 Preact 애플리케이션 설정

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage