CSS 위치 지정

CSS 위치 지정

위치: 요소 위치 지정 방법, 값은 정적, 고정, 상대, 절대

  • 정적: 정적 위치 지정(기본 상태, 위치 지정되지 않음) ).

  • 고정: 위치가 고정되었습니다.

  • 상대적: 상대 위치입니다.

  • 절대: 절대 위치 지정.

위치 지정 방법은 위치 지정 속성과 함께 사용해야 합니다.

위치 지정 좌표: 위치 지정 요소와 요소가 요소로부터 얼마나 떨어져 있는지 지정합니다. 대상 요소.

  • 왼쪽: 위치 지정 요소, 대상 요소 왼쪽으로부터의 거리입니다.

  • top: 위치 지정 요소, 대상 요소 상단으로부터의 거리입니다.

  • right: 위치 지정 요소, 대상 요소의 오른쪽으로부터의 거리.

  • 하단: 위치 지정 요소, 대상 요소 하단으로부터의 거리.


고정 위치, 위치:고정

  • 고정 위치는 브라우저 창을 기준으로 합니다.

  • 위치가 고정되어 있고 공간을 차지하지 않으며 일반 요소보다 수준이 높습니다. 웹페이지가 스크롤될 때 스크롤되지 않습니다.

  • 위치 좌표를 지정하지 않으면 고정 위치 요소의 위치가 그대로 유지됩니다.

  • 고정 위치 지정 요소는 요소가 무엇이든 "블록 요소"여야 합니다.

상대 위치 지정, 위치:상대적;

  • 상대 위치 지정, "을 기준으로 합니다. 자신을 위치시키는 "원래의 자아".

  • 상대 위치 지정은 여전히 ​​공간을 차지하며 일반 요소보다 높은 수준을 갖습니다.

  • 위치 좌표를 지정하지 않으면 상대적으로 배치된 요소의 위치가 그대로 유지됩니다.

  • 상대 위치 지정은 원래 인라인 요소였다면 위치 지정 후에도 여전히 인라인 요소임을 의미합니다. 원래 블록 요소였다면 이후에도 여전히 블록 요소입니다. 포지셔닝.

참고: 상대 위치 지정과 절대 위치 지정은 일반적으로 함께 사용됩니다.


절대 위치 지정, 위치:절대

  • 는 요소를 기준으로 위치를 지정합니다. 해당 조상(상대 위치 지정, 절대 위치 지정)을 사용하여 위치 지정을 수행합니다.

  • 부모 요소에 위치 지정이 없으면 위쪽에 위치하는 요소를 찾습니다.

  • <body>가 항상 발견되지만 위치 지정 요소가 발견되지 않으면 <body>를 기준으로 위치를 지정합니다.

  • 절대적으로 배치된 요소로 공간을 차지하지 않으며 일반 요소보다 높은 수준을 갖습니다.

  • 위치 좌표를 지정하지 않으면 절대 위치에 있는 요소의 위치가 그대로 유지됩니다.

  • 절대 위치 요소는 "블록 요소"입니다.

지속적인 학습
  • 코스 추천
  • 코스웨어 다운로드
현재 코스웨어를 다운로드할 수 없습니다. 현재 직원들이 정리하고 있습니다. 앞으로도 본 강좌에 많은 관심 부탁드립니다~