다른 CSS 포지셔닝 체계 설명 : 정적, 상대, 절대, 고정, 스티커

CSS 포지셔닝 방법에는 5 가지 유형의 CSS 포지셔닝 방법이 있습니다 : 정적, 상대, 절대, 고정 및 스티커. 정적은 문서 흐름에 따라 기본 위치이며 오프셋을 지원하지 않습니다. 상대적으로 원래 위치에 비해 상대적인 움직임이 있으며 여전히 문서 흐름에 있습니다. 절대는 문서 흐름에서 분리되며 가장 가까운 비 정적 위치 조상 위치에 따라 위치됩니다. 브라우저 창에 비해 고정되었으며 종종 탐색 표시 줄을 고정하는 데 사용됩니다. 끈적 끈적한 것은 상대적으로 고정 된 것과 고정 된 특정 위치로 스크롤하고 고정 된 머리에 적합하며 끈적 끈적한 헤드에 적합합니다. 그들의 행동 차이를 마스터하는 것은 레이아웃의 핵심입니다.

CSS의 위치는 실제로 어렵지 않지만 많은 사람들이 처음에 혼란을 피우기 쉽습니다. 간단히 말해서, 포지셔닝은 페이지의 요소가 "머무는"위치를 제어하는 것입니다. 일반적으로 사용되는 5 가지 포지셔닝 방법은 static , relative , absolute , fixed 및 sticky . 그들의 행동은 크게 다릅니다. 잘못된 것을 사용하면 레이아웃이 지저분해질 수 있습니다.

아래에서는 그들의 차이점과 사용 시나리오 및 행동 특성의 관점에서 사용하는 방법에 대해 이야기하겠습니다.

정적 포지셔닝 : 기본 포지셔닝 방법

position 속성을 작성하지 않으면 요소는 static 위치입니다. 문서 흐름에 따라 정직하게 배열되어있어 위에서 아래에서 왼쪽에서 왼쪽에서 오른쪽으로 정직해야하며 top , bottom , left 및 right 과 같은 속성의 영향을받지 않습니다.

• 특별한 제어가 필요하지 않은 대부분의 요소에 적합
• 문서 흐름이 아닙니다
• 오프셋 설정은 지원되지 않습니다 ( top: 20px )

따라서 특히 레이아웃 동작을 변경하려고하지 않으면 일반적으로 레이아웃 동작을 이동할 필요가 없습니다.

상대적 위치 : 원래 위치를 상대적으로 이동하십시오

이 포지셔닝 방법은 특히 요소의 위치를 미세 조정하려는 경우 매우 일반적입니다. 여전히 문서 스트림에 있지만 top , bottom , left 및 right 사용할 수 있으며 "약간 이동"하여 약간의 이동 방향은 원래 위치와 관련이 있습니다.

예를 들어:

 .상자 {
  위치 : 상대;
  상단 : 10px;
  왼쪽 : 20px;
}

이런 식으로 .box 원래 위치에서 10px로, 20px로 오른쪽으로 이동하지만 원래 위치는 여전히 비어 있으며 다른 요소의 레이아웃에는 영향을 미치지 않습니다.

일반적인 용도 :

• 작은 조정을하십시오
• absolute 어린이 요소와 함께 사용 (나중에 이야기 할게)

절대 포지셔닝 : 문서 흐름에서 분리, 가장 가까운 포지셔닝 조상 포지셔닝에 비해

absolute 는 문서 스트림을 완전히 벗어난 "자유"이며, 그 위치는 static 위치를 설정 한 가장 최근의 조상 요소에 의해 결정됩니다. 그렇지 않은 경우 뷰포트 (브라우저 창)이 발견 될 때까지 계속 검색하십시오.

예를 들어:

 .parent {
  위치 : 상대;
}

.어린이 {
  위치 : 절대;
  상단 : 0;
  왼쪽 : 0;
}

이런 식으로 .child 전체 페이지의 왼쪽 상단이 아닌 .parent 의 왼쪽 상단에 위치합니다.

핵심 사항 :

• 문서 스트림과 분리되며 다른 요소는 존재하지 않는 것 같습니다.
• 가장 가까운 포지셔닝 조상 (비 static )에 의존
• 팝업 창, 드롭 다운 메뉴, 아이콘 오버레이 등에 일반적으로 사용됩니다.

고정 포지셔닝 : 브라우저 창에 대한 고정

fixed 포지셔닝은 absolute 와 매우 유사하지만 조상 요소에 의존하지는 않지만 브라우저 창에 따라 직접 배치됩니다. 페이지가 스크롤하더라도 항상 해당 위치에서 "스틱"입니다.

예를 들어, 내비게이션 막대가 오른쪽 하단의 상단 또는 플로팅 버튼에 고정되면 종종 사용됩니다.

 .navbar {
  위치 : 고정;
  상단 : 0;
  너비 : 100%;
}

알아채다:

• 문서 흐름을 그대로 두십시오
• 페이지 스크롤과 함께 움직이지 마십시오
• 고정 위치에 적합한 UI 요소

끈적 끈적한 포지셔닝 : 상대와 고정 사이

이것은 비교적 새로운 포지셔닝 방법이지만 사용하기 쉽습니다. 그것은 둘의 조합과 같습니다. 그것은 특정 범위에서 relative 으로 행동하며, 일단 해당 범위를 넘어서면 fixed 됩니다.

가장 일반적인 것은 "끈적 끈적한"내비게이션 바 또는 테이블의 고정 열 헤더를 만드는 것입니다.

 .Header {
  위치 : 스티커;
  상단 : 0;
}

이렇게하면 페이지가 .header 의 위치로 스크롤하면 움직이지 않고 상단에 "고착"됩니다.

메모:

• top , bottom , left 또는 right 과 함께 사용해야합니다. 그렇지 않으면 효과가 없습니다.
• 문서 흐름이 아닙니다
• 모 컨테이너는 overflow: hidden transform . 그렇지 않으면 실패합니다.

기본적으로 그게 다야. 포지셔닝 방법은 많지 않지만 결합 할 때 다양한 복잡한 레이아웃을 만들 수 있습니다. 핵심은 각 방법의 행동 특성과 그 차이를 이해하는 것입니다. 예를 들어, 문서 스트림에서 벗어나야하고 부모 요소에 의존 할 때이 세부 사항은 명확 해지고 사용할 때는 실수를하지 않습니다.

위 내용은 다른 CSS 포지셔닝 체계 설명 : 정적, 상대, 절대, 고정, 스티커의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!