Bootstrap의 위치 유틸리티 (스티커, 고정, 상대, 절대)를 어떻게 사용합니까?

부트 스트랩의 위치 유틸리티 이해 : 끈적 끈적, 고정, 상대적, 절대

Bootstrap은 웹 페이지 레이아웃 내에서 요소의 위치를 ​​제어하기 위해 여러 위치 유틸리티 ( position: static , position: relative , 위치 position: absolute , position: fixed 및 position: sticky )를 제공합니다. 이 유틸리티는 다른 부트 스트랩 기능과 결합 될 때 반응 형 인터페이스를 설계하는 데 큰 유연성을 제공합니다. 각각을 탐색합시다.

Bootstrap의 위치 유틸리티 (스티커, 고정, 상대, 절대)를 어떻게 사용합니까?

Bootstrap은 마진이나 패딩과 같은 다른 유틸리티와 같은 방식으로 "스티커", "고정", "상대"또는 "절대"라는 클래스를 직접 제공하지 않습니다. 대신 부트 스트랩은 표준 CSS position 속성을 활용합니다. 사용자 정의 스타일 내에서 표준 CSS를 사용하여 또는 부트 스트랩을 기반으로하는 CSS 프레임 워크를 사용하여 이러한 위치를 적용합니다. 사용 방식은 표준 CSS 사용과 동일합니다.

• position: static (기본값) : 모든 HTML 요소의 기본 위치입니다. 요소는 문서의 정상 흐름에 따라 위치됩니다. top , right , bottom 및 left 속성은 효과가 없습니다.
• position: relative : 요소는 정상 위치와 관련하여 위치됩니다. top , right , bottom 및 left 속성은 요소를 일반 위치에서 상쇄합니다. 요소는 문서의 흐름 내에 남아 있습니다.
• position: absolute : 요소는 가장 가까운 위치 조상 ( position: relative , position: absolute , position: fixed 또는 position: sticky )에 비해 배치됩니다. 위치가없는 조상이 없으면 문서 본문에 비해 배치됩니다. 일반 문서 흐름에서 제거됩니다.
• position: fixed : 요소는 뷰포트 (브라우저 창)에 비해 배치됩니다. 페이지가 스크롤 된 경우에도 위치에 고정되어 있습니다. top , right , bottom 및 left 속성은 뷰포트 내의 위치를 ​​결정합니다. 일반 문서 흐름에서 제거됩니다.
• position: sticky : 요소는 사용자의 두루마리 위치에 따라 위치됩니다. 지정된 임계 값 ( top , right , bottom 또는 왼쪽 또는 left 으로 정의)을 가로 지르기 전까지는 position: relative position: fixed 동작합니다. "스티커"가 될 때까지 일반 문서 흐름에 남아 있습니다.

이를 사용하려면 CSS에 position 속성을 추가 할 수 있습니다.

 <code class="css">.my-element { position: relative; top: 20px; left: 10px; } .fixed-element { position: fixed; top: 0; left: 0; }</code>

인라인 스타일을 사용하여 HTML에 직접 적용 할 수 있습니다 (일반적으로 유지 보수 가능성에 대해 권장하지 않음) 또는 HTML에 링크 된 별도의 CSS 파일에이를 적용 할 수 있습니다. 부트 스트랩 자체는 이들에 미리 구축 된 클래스를 제공하지 않지만 직접 쉽게 만들 수 있습니다.

부트 스트랩 position: sticky , position: fixed 및 position: absolute ?

주요 차이점은 이러한 위치가 페이지와 스크롤과 관련된 방법에 있습니다.

• position: absolute : 가장 가까운 위치 조상에 대한 요소를 위치시킵니다. 그것은 종종 컨테이너 내에 요소를 정확하게 배치하는 데 사용됩니다. 요소는 정상 흐름에서 제거됩니다.
• position: fixed : 뷰포트에 대한 요소를 위치합니다. 페이지가 스크롤 될 때에도 같은 지점에 유지됩니다. 항상 볼 수있는 고정 헤더, 사이드 바 또는 요소에 유용합니다. 요소는 정상 흐름에서 제거됩니다.
• position: sticky : relative 및 fixed 의 하이브리드. 지정된 임계 값 (예 : 특정 지점을 스크롤 할 때)까지 relative 으로 작용 한 다음 fixed 동작으로 전환합니다. 이는 사용자가 특정 지점을 스크롤하면 뷰포트 상단에 "고수"해야하는 헤더 또는 내비게이션 막대에 이상적입니다. 요소는 끈적 끈적해질 때까지 일반 문서 흐름에 남아 있습니다.

Bootstrap의 포지셔닝 클래스를 사용하여 끈적 끈적한 헤더 또는 내비게이션 바를 만드는 방법은 무엇입니까?

Bootstrap은 전용 "스티커"클래스가 없지만 position: sticky 사용하여 스티커 헤더를 쉽게 만들 수 있습니다.

 <code class="html"><nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top"> <!-- Navbar content --> </nav></code>

 <code class="css">.sticky-top { position: sticky; top: 0; z-index: 1020; /* Ensure it's above other content */ }</code>

이 코드는 Navbar에 클래스 sticky-top 추가합니다. CSS는 position: sticky and top: 0 뷰포트의 상단을 고수하게합니다. z-index 끈적 끈적한 헤더가 다른 콘텐츠 위에 나타나도록 중요합니다. 그 position: sticky 끈적한 효과가 정의 된 높이가 정의 된 부모 요소가 필요합니다.

더 복잡한 레이아웃을 위해 Bootstrap의 포지셔닝 클래스를 결합 할 수 있습니까? 그렇다면 어떻게해야합니까?

예, 더 복잡한 레이아웃을 위해 Bootstrap의 위치 (CSS) 및 기타 유틸리티 클래스를 절대적으로 결합 할 수 있습니다. 핵심은 다른 position 값이 어떻게 상호 작용하는지 이해하는 것입니다. 예를 들어:

내부에 절대적으로 배치 된 어린이가있는 비교적 배치 컨테이너를 가질 수 있습니다. 이를 통해 컨테이너 외부의 다른 요소의 레이아웃에 영향을 미치지 않고 해당 컨테이너 내의 요소를 정확하게 위치시킬 수 있습니다.

 <code class="html"><div class="container position-relative"> <div class="position-absolute top-0 start-0">Top-left element</div> <div class="position-absolute bottom-0 end-0">Bottom-right element</div> </div></code>

시각적 순서를 제어하기 위해 요소를 쌓을 때 z-index 속성을 고려해야합니다. position 값과 Bootstrap의 그리드 시스템 또는 Flexbox를 신중하게 결합하여 매우 복잡하고 반응이 좋은 레이아웃을 만들 수 있습니다. 열쇠는 레이아웃을 신중하게 계획하고 CSS 포지셔닝 속성의 계단식 효과를 이해하는 것입니다.

위 내용은 Bootstrap의 위치 유틸리티 (스티커, 고정, 상대, 절대)를 어떻게 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!