CSS 포지셔닝: 초보자의 CSS 포지셔닝 소개

반응형

CSS 포지셔닝이란 무엇입니까?

CSS 위치는 문서에 요소를 배치할 위치입니다. 상단, 하단, 오른쪽 및 왼쪽 속성을 사용하여 요소의 정확한 위치를 지정할 수 있습니다.

CSS 위치 유형

CSS 포지셔닝에는 5가지 유형이 있다.

• 정적
• 관련있는
• 절대적
• 고정된.
• 끈적거리는

 

한 명씩 봅시다.

정적 위치 지정

이것은 문서에서 요소의 기본 위치입니다. 그것은 위에서 아래로 그들을 위치시킵니다.

또한 필요하지 않은 위치가 있는 요소의 위치를 재설정하는 데 사용할 수 있습니다. 부모나 주변 요소에는 영향을 주지 않습니다.

 

여기서 Child1은 정적 위치를 가정합니다.

상대 포지셔닝

요소가 이 위치를 가정할 때, 해당 요소는 초기 위치를 기준으로 배치됩니다. 그러나 위쪽, 오른쪽, 왼쪽 또는 아래쪽 좌표를 나타내지 않고 사용하면 정적 위치가 됩니다.

50px의 속성을 왼쪽에서 50px로 지정하면 왼쪽에서 50px로 이동합니다.

여기서 Child1은 왼쪽이 50px로 설정된 상대적인 위치를 가집니다.

 

게다가, 상대적인 위치를 가진 부모는 당신이 아이 요소를 절대적으로 그 안에 위치시킬 수 있게 해준다. 따라서 원하는 대로 요소를 배치할 수 있습니다.

절대 위치 지정

또한 요소를 원하는 위치에 배치할 수 있는 또 다른 강력한 CSS 포지셔닝 유형입니다.

상단, 오른쪽, 하단 및 왼쪽 속성을 설정하여 일반적인 문서 흐름을 무시할 수 있습니다.

값은 상대적 위치를 가진 상위 요소에 상대적이어야 합니다.

 

상위 항목이 없는 경우 요소는 HTML 문서를 기준으로 배치됩니다. 이 위치는 인접한 요소에는 영향을 미치지 않습니다.

네 가지 하위 요소는 모두 절대 위치가 다릅니다.

고정 위치 지정

이름에서 알 수 있듯이, 요소는 페이지를 스크롤할 때 위치에 고정됩니다.

즉, 상단, 하단, 왼쪽 및 오른쪽 속성을 설정할 수 있는 절대 위치를 가정합니다.

 

요소가 뷰포트를 기준으로 배치된다는 점을 기억하십시오.

Nav는 위치가 고정되어 있습니다.

스티커 위치 지정

정적 위치와 마찬가지로 스티커 위치 지정은 일반적인 문서 흐름에 따라 요소를 배치합니다.

화려하지만 모든 브라우저가 지원하는 것은 아니다. 페이지를 스크롤할 때 요소는 뷰포트 위치가 지정된 지점에 도달할 때까지 상대적인 위치를 가정합니다.

 

예를 들어, top: 0입니다.

여기 홈 섹션이 끈적끈적해요.