요소의 고정 수직 및 상대 수평 위치를 달성하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

요소의 고정 수직 및 상대 수평 위치를 달성하는 방법은 무엇입니까?

Susan Sarandon

풀어 주다： 2024-12-16 20:38:10

원래의

457명이 탐색했습니다.

How to Achieve Fixed Vertical and Relative Horizontal Positioning of an Element?

세로로 고정되었지만 상대적인 가로로 요소를 배치하는 방법

이 시나리오에서는 버튼이 컨테이너 오른쪽에서 고정된 거리에 위치해야 합니다. 뷰포트 크기. 또한 일관된 수직 및 수평 오프셋을 유지하면서 창과 함께 스크롤해야 합니다. 이를 달성하려면:

폭, 높이 및 오른쪽 여백이 고정된 컨테이너 div(div.inflow)를 정의합니다.
선택적으로 래퍼 div(div.positioner)를 추가합니다. 고정 요소를 컨테이너 내에서 수평으로 배치합니다.
정의된 너비, 높이 및 상단을 사용하여 고정 요소(div.fixed)를 만듭니다. margin.
위치 설정: 고정 요소에 고정되어 뷰포트에 고정됩니다.
고정 요소에 왼쪽 또는 오른쪽 설정을 삼가하세요. 대신 컨테이너 및 래퍼 div를 활용하여 수평 위치를 설정하세요.

HTML:

<body>
  <div class="inflow">
    <div class="positioner">
      <div class="fixed"></div>
    </div>
  </div>
</body>

로그인 후 복사

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(div.positioner)가 필요합니다.

중요: 오버플로 설정: 컨테이너에 숨겨진 항목이 없습니다. 고정 위치 div가 경계 외부에 있는 경우 영향을 미칩니다. 고정 위치는 컨테이너의 오버플로 컨텍스트에서 이를 효과적으로 제거합니다.

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