CSS를 사용해서만 X축에서 요소의 위치를 ​​수정할 수 있나요?

CSS에서만 X축 위치 고정

웹 레이아웃을 디자인할 때 요소를 특정 축에 고정하는 것이 바람직한 경우가 많습니다. 여전히 다른 방향으로 스크롤할 수 있습니다. 일반적인 시나리오 중 하나는 사용자가 수직으로 스크롤하는 동안 수평으로 유지되도록 x축의 요소를 수정하는 것입니다.

가능한가요?

예, CSS만을 사용하여 x축 위치를 고정하는 것이 가능합니다.

달성 방법

이를 달성하려면 다음 단계를 따르세요.

1. 요소 위치를 '절대'로 설정: 이렇게 하면 일반 흐름에서 요소가 제거됩니다. 문서의 위치를 ​​정확하게 지정할 수 있습니다.
2. '왼쪽'을 사용하세요. 속성: 가장 가까운 위치의 조상을 기준으로 요소의 왼쪽 가장자리를 지정합니다.
3. jQuery 사용: jQuery를 활용하여 스크롤 이벤트에 응답하고 그에 따라 요소의 위치를 ​​조정합니다.

jQuery와 CSS 예:

$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft() + 15 // Adjust based on CSS 'left'
    });
});

#header {
    top: 15px;
    left: 15px;
    position: absolute;
}

고급 스크립트:

동적 CSS 변경을 지원하려면 다음 업데이트된 스크립트를 사용할 수 있습니다.

var leftOffset = parseInt($('#header').css('left')); // Grab initial left position
$(window).scroll(function() {
    $('#header').css({
        'left': $(this).scrollLeft() + leftOffset // Use initial offset
    });
});

이 단계를 따르면 수직 방향을 허용하면서 x축에서 요소의 위치를 ​​효과적으로 고정할 수 있습니다. 스크롤 중입니다.

위 내용은 CSS를 사용해서만 X축에서 요소의 위치를 ​​수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!