요소를 수직으로 고정하고 완전히 수평으로 배치하는 방법은 무엇입니까?

세로로 고정된 요소와 절대 가로로 요소를 배치하는 방법

웹 개발에서는 요소를 특정 방식으로 배치해야 하는 경우가 많습니다. 이는 뷰포트 크기에 관계없이 일관성을 유지합니다. 그러한 시나리오 중 하나는 다른 요소와 특정 수평 거리를 유지하면서 요소를 수직으로 고정하는 것입니다.

다음 과제를 고려해보세요. 컨테이너 div의 오른쪽에서 일정한 거리를 유지하려면 버튼이 필요합니다. 버튼은 뷰포트의 크기에 관계없이 뷰포트 내에서 고정된 수직 위치에 유지되어야 합니다.

원하는 위치 지정

이는 다음을 사용하여 가능합니다. 다음과 같이 위치: 고정 및 위치: 절대의 조합 code:

<div class="container">
  <div class="button"></div>
</div>

.container {
  width: 200px;
  height: 1000px;
  border: 1px solid blue;
  float: right;
  position: relative;
  margin-right: 100px;
}
.button {
  width: 80px;
  border: 1px solid red;
  height: 100px;
  position: fixed;
  top: 60px;
  margin-left: 15px;
}

이 접근 방식의 핵심은 .button 요소의 왼쪽/오른쪽 속성을 명시적으로 설정하지 않는다는 것입니다. 대신 컨테이너 div와 추가 div(.positioner)를 사용하여 가로 위치 지정을 설정합니다.

.button 요소는 .container div에서 가로 위치를 상속하는 반면, .positioner div는 .button을 푸시합니다. 컨테이너 div의 오른쪽을 향합니다. 이 예에서 .button 요소는 컨테이너 div의 오른쪽 가장자리에서 15px의 거리를 유지합니다.

또한 .button 요소의 고정 수직 위치(상단: 60px)는 해당 수직 위치에 유지되도록 합니다. 페이지가 스크롤될 때 뷰포트 내에서.

위 내용은 요소를 수직으로 고정하고 완전히 수평으로 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!