스크롤하는 동안 수직으로 고정된 요소와 절대 수평으로 요소를 배치하려면 어떻게 해야 합니까?

위치 요소는 수직으로 고정되고 절대 수평으로

사용자는 뷰포트 크기에 관계없이 div의 오른쪽 가장자리에서 설정된 거리를 유지하는 버튼에 대한 솔루션을 찾았습니다. , 창을 스크롤하는 동안. 이는 다음 전략을 사용하여 달성할 수 있습니다:

HTML 구조

<div class="inflow">
  <div class="positioner"> <!-- May not be needed -->
    <div class="fixed"></div>
  </div>
</div>

CSS 스타일링

div.inflow {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}

div.fixed {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

핵심 사항

• 고정 수직 위치: 위치: div.fixed에 고정되어 window.
• 절대 수평 위치: 고정 수평 위치는 직접 설정되지 않습니다. 대신 래퍼 div(div.inflow 및 선택적으로 div.positioner)를 사용하여 상위 div를 기준으로 위치를 정의합니다.
• 동적 조정: 컨테이너 div의 크기가 변경됨에 따라 버튼은 오른쪽 가장자리에서 원하는 거리를 유지합니다.
• 오버플로 처리: 고정 위치 요소는 Overflow:hidden 속성이 설정된 경우에도 해당 컨테이너 div의 오버플로 컨텍스트에서 제외됩니다.

위 내용은 스크롤하는 동안 수직으로 고정된 요소와 절대 수평으로 요소를 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!