CSS 고정 위치 지정 고정 자세한 설명

좋은 점을 찾았습니다

소개: position:sticky는 CSS 위치 지정의 새로운 속성이며 주로 사용되는 고정 위치 지정입니다. 스크롤 이벤트 모니터링의 경우 간단히 말해서 슬라이딩 프로세스 중에 요소와 상위 요소 사이의 거리가 고정 위치 지정 요구 사항(예: 상단: 100px)에 도달하면 이때 position:sticky의 효과는 고정 위치 지정과 동일합니다. , 적절한 위치로 고정

고정 위치 지정에 대해 이야기하기 전에 위치의 다른 위치 지정에 대해 이야기해 보겠습니다.

절대: 절대 위치 지정 요소를 생성하고 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치를 지정합니다. 요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다.

fixed: 브라우저 창을 기준으로 위치가 고정된 요소를 생성합니다(이전 IE에서는 이를 지원하지 않음). 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽"으로 지정됩니다. 속성.

relative: 문서 흐름에서 벗어나지 않고 일반 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.

정적:

기본값, 위치 지정 없음, 요소는 일반적인 문서 흐름에 나타납니다(상단, 하단, 왼쪽, 오른쪽 또는

z-index 선언 무시). 상속은 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다.

sticky 사용법:

#sticky-nav {
    position: sticky;
    top: 100px;
}

위치:sticky를 설정하고 (상단, 하단, 오른쪽, 왼쪽) 중 하나를 제공합니다.

사용 조건:

상위 요소는 Overflow:hidden 또는 Overflow:auto 속성을 가질 수 없습니다.

위, 아래, 왼쪽, 오른쪽의 네 가지 값 중 하나를 지정해야 합니다. 그렇지 않으면 상대 위치에만 적용됩니다.

부모 요소의 높이는 고정 요소의 높이보다 낮을 수 없습니다.

고정 요소는 상위 요소 내에서만 적용됩니다.

프로젝트 함정

문제 설명:

작은 프로그램 개발 프로젝트에서 탭 구성 요소는 탭 막대 전환을 포함하는 고정 위치 지정을 사용합니다. bar는 콘텐츠에 클릭 이벤트(또는 터치 이벤트)가 있음을 표시하는 대형 목록 컨테이너 콘텐츠입니다. iOS 및 PC 브라우저에서는 클릭 테스트가 정상입니다. ! ! ! 맙소사, 클릭이 완료되었습니다! ! 게다가 목록 컨테이너에 있는 항목의 클릭 점프를 제거하려고 했으나 탭 스위치의 클릭이 응답하지 않고 이벤트가 사라진 것을 발견했습니다! ! ! 이벤트 흐름의 방향을 확인하기 위해 중단점을 설정합니다. 첫 번째 이벤트 캡처->대상 노드 탭->이벤트 버블링은 실제로 컨테이너 목록의 항목에 나타납니다. . . 악몽입니다. ​​대략적인 프로젝트 구조:

html 구조:

<div class="service-wrap">
        <tab>这是tab切换</tab>
        <div class="list-container">
            <!--for循环有很多item-->
            <item></item>
            <item></item>
        </div>
    </div>

해결 방법:

컴포넌트 라이브러리의 탭을 사용할 때 외부 레이어에 div를 넣어 클릭 침투 및 비정상적인 이벤트 흐름 방향을 방지하거나(임시 해결 방법) 충분하지 않습니다) 문제의 근본 원인은 비즈니스 시나리오에 따라 다릅니다.

. 이 탭을 사용할 때 Sticky는 탭 구성 요소의 인라인 스타일로 사용할 수 없습니다. 이는 고정을 통해 달성할 수 있습니다. 호출 클래스 외부에서 position:fixed !import를 설정했습니다. 스타일의 가장 높은 우선순위가 구성 요소 라이브러리의 위치 지정 스타일을 재정의하고 모든 것이 정상입니다.

추천 튜토리얼: "PHP 튜토리얼" "CSS 튜토리얼"

위 내용은 CSS 고정 위치 지정 고정 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!