요소를 수직으로 고정하고 수평으로 절대 배치하는 방법

문제:

사용자가 다음과 같은 버튼을 만들려고 합니다. 뷰포트에 관계없이 div의 오른쪽 가장자리로부터 특정 거리를 유지하면서 뷰포트로부터 고정된 수직 거리를 유지합니다. size.

해결책:

수평 위치 지정:

"절대 수평" 위치 지정은 제공된 방법으로는 기술적으로 달성할 수 없습니다. 솔루션을 사용하면 div의 오른쪽 가장자리에서 고정된 거리를 유지한다는 목표를 달성할 수 있습니다. 수평으로 고정된 요소에 대한 왼쪽 또는 오른쪽 속성 설정을 피함으로써 컨테이너 div를 사용하여 수평 위치를 제어합니다.

세로 위치 지정:

요소가 배치됩니다. position:fixed 속성을 사용하여 수직으로 고정됩니다. 최고 값을 설정하면 뷰포트 크기에 관계없이 수직 위치가 유지됩니다.

코드 샘플:

다음 코드는 구현을 보여줍니다.

HTML:

CSS:

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

주요 고려 사항:

• div.inflow div의 너비가 고정되어 있으면 div.positioner div가 필요하지 않을 수 있습니다. 고정 요소의 왼쪽 여백.
• 오버플로 설정: 컨테이너 div에 숨겨져 있어도 고정 요소의 외부 위치 지정에는 영향을 주지 않습니다. 경계.