CSS-포지셔닝

CSS는 HTML 요소를 배치하는 데 도움이됩니다. 원하는 위치에 HTML 요소를 배치 할 수 있습니다. 페이지의 원래 위치를 기준으로 요소를 배치할지 아니면 상위 요소를 기준으로 절대 위치를 지정할지 지정할 수 있습니다.

이제 예제와 함께 모든 CSS 위치 지정 관련 속성을 볼 수 있습니다.

상대 위치

상대 위치는 일반적으로 나타나는 위치를 기준으로 HTML 요소의 위치를 변경합니다. 따라서 "left : 20"은 요소의 LEFT 위치에 20 픽셀을 추가합니다.

position 속성 과 함께 top 및 left 두 값을 사용 하여 HTML 문서의 어느 위치 로든 HTML 요소를 이동할 수 있습니다.

사용 음수 값을 - 왼쪽을 이동 왼쪽 .
오른쪽으로 이동 — 왼쪽에 양수 값을 사용합니다 .
위로 이동 - 사용을위한 음의 값 정상 .
아래로 이동- 상단에 양수 값을 사용합니다 .

NOTE− top 및 left 와 동일한 방식으로 bottom 또는 right 값을 사용할 수 있습니다 .

다음은 예입니다.

<html>
   <head>
   </head>

   <body>
      <div style = "position:relative; left:80px; top:2px; background-color:yellow;">
         This div has relative positioning.
      </div>
   </body>
</html>

다음 결과가 생성됩니다-

절대 포지셔닝

요소 position: absolute 화면 왼쪽 상단 모서리를 기준으로 지정된 좌표에 배치됩니다.

position 속성 과 함께 top 및 left 두 값을 사용 하여 HTML 문서의 어느 위치 로든 HTML 요소를 이동할 수 있습니다.

사용 음수 값을 - 왼쪽을 이동 왼쪽 .
오른쪽으로 이동 — 왼쪽에 양수 값을 사용합니다 .
위로 이동 - 사용을위한 음의 값 정상 .
아래로 이동- 상단에 양수 값을 사용합니다 .

NOTE− 위쪽 및 왼쪽과 동일한 방식으로 아래쪽 또는 오른쪽 값을 사용할 수 있습니다 .

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <div style = "position:absolute; left:80px; top:20px; background-color:yellow;">
         This div has absolute positioning.
      </div>
   </body>
</html>

고정 위치

고정 위치를 사용하면 스크롤에 관계없이 페이지의 특정 위치에 요소의 위치를 고정 할 수 있습니다. 지정된 좌표는 브라우저 창에 상대적입니다.

position 속성 과 함께 top 및 left 두 값을 사용 하여 HTML 문서의 어느 위치 로든 HTML 요소를 이동할 수 있습니다.

사용 음수 값을 - 왼쪽을 이동 왼쪽 .
오른쪽으로 이동 — 왼쪽에 양수 값을 사용합니다 .
위로 이동 - 사용을위한 음의 값 정상 .
아래로 이동- 상단에 양수 값을 사용합니다 .

NOTE− top 및 left 와 동일한 방식으로 bottom 또는 right 값을 사용할 수 있습니다 .

여기에 예가 있습니다-

<html>
   <head>
   </head>

   <body>
      <div style = "position:fixed; left:80px; top:20px; background-color:yellow;">
         This div has fixed positioning.
      </div>
   </body>
</html>