Div를 기준으로 요소를 수직으로 고정하고 수평으로 배치하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

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

집

웹 프론트엔드

CSS 튜토리얼

Div를 기준으로 요소를 수직으로 고정하고 수평으로 배치하는 방법은 무엇입니까?

Patricia Arquette

Dec 01, 2024 pm 12:01 PM

How to Vertically Fix and Horizontally Position an Element Relative to a Div?

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

문제:

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

해결책:

수평 위치 지정:

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

수직 위치 지정:

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

코드 샘플:

다음 코드는 구현:

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.inflow div에 고정 너비가 있는 경우 .positioner div가 필요하지 않을 수 있으므로 고정 너비를 직접 설정할 수 있습니다. 요소의 왼쪽 여백.
오버플로 설정: 컨테이너 div에 숨겨도 고정 요소의 경계 외부 위치 지정에는 영향을 미치지 않습니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.