> 웹 프론트엔드 > CSS 튜토리얼 > 절대 위치 지정의 기준점은 무엇입니까?

절대 위치 지정의 기준점은 무엇입니까?

WBOY
풀어 주다: 2024-01-23 08:20:06
원래의
1142명이 탐색했습니다.

절대 위치 지정의 기준점은 무엇입니까?

절대적으로 위치된 참조 요소의 위치 매개변수는 무엇입니까? 특정 코드 예제가 필요합니다

절대 위치 지정은 CSS에서 일반적으로 사용되는 위치 지정 방법으로, 가장 가까운 위치의 상위 요소를 기준으로 요소의 위치를 ​​지정하여 페이지에서 요소의 정확한 위치 지정을 달성합니다. 절대 위치 지정을 사용하는 경우 위쪽, 오른쪽, 아래쪽, 왼쪽을 포함하는 위치 매개변수를 지정해야 합니다.

top: 가장 가까운 위치에 있는 상위 요소의 위쪽 가장자리(상단 가장자리)를 기준으로 요소의 거리를 지정합니다. 픽셀(px), 백분율(%) 또는 길이 단위를 지원하는 기타 값을 사용할 수 있습니다. 상단 값을 지정하면 요소의 상단 가장자리가 지정된 거리에 정렬됩니다.

right: 가장 가까운 위치에 있는 상위 요소의 오른쪽 가장자리(오른쪽 가장자리)를 기준으로 요소의 거리를 지정합니다. 픽셀(px), 백분율(%) 또는 길이 단위를 지원하는 기타 값을 사용할 수 있습니다. 오른쪽 값을 지정하면 요소의 오른쪽 가장자리가 지정된 거리에 정렬됩니다.

bottom: 가장 가까운 위치에 있는 상위 요소의 아래쪽 가장자리(하단 가장자리)를 기준으로 요소의 거리를 지정합니다. 픽셀(px), 백분율(%) 또는 길이 단위를 지원하는 기타 값을 사용할 수 있습니다. 하단 값을 지정하면 요소의 하단 가장자리가 지정된 거리에 정렬됩니다.

left: 가장 가까운 위치에 있는 상위 요소의 왼쪽 가장자리(왼쪽 가장자리)를 기준으로 요소의 거리를 지정합니다. 픽셀(px), 백분율(%) 또는 길이 단위를 지원하는 기타 값을 사용할 수 있습니다. 왼쪽 값을 지정하면 요소의 왼쪽 가장자리가 지정된 거리에 정렬됩니다.

다음은 절대 위치 지정 참조 요소의 위치 매개변수를 사용하는 방법을 보여주는 구체적인 코드 예입니다.

HTML 코드:

<div class="container">
  <div class="box">
    <p>绝对定位的参考元素</p>
  </div>
</div>
로그인 후 복사

CSS 코드:

.container {
  position: relative;
  width: 400px;
  height: 300px;
  border: 1px solid #000;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 100px;
  background-color: #f00;
}
로그인 후 복사

위 코드에서는 컨테이너를 만듭니다. 컨테이너를 선택한 다음 절대 위치에 있는 .box 상자를 컨테이너에 배치합니다. .containerposition:relative;.box의 참조 요소로 고정된 너비와 높이로 설정합니다. .container容器,然后在容器中放置了一个绝对定位的.box盒子。.container设置了position: relative;,作为.box的参考元素,固定了宽度和高度。

.box中,我们使用了绝对定位,设置了position: absolute;,然后通过将topleft都设置为50%,再通过transform: translate(-50%, -50%);topleft的位置居中对齐。这样就实现了.box相对于.container

.box에서는 절대 위치 지정을 사용하고 position:absolute;를 설정한 다음 topleft 를 전달합니다. >둘 다 50%로 설정한 다음 transform:transform(-50%, -50%);를 사용하여 상단왼쪽을 변경합니다. 위치는 중앙이다. 이는 .container를 기준으로 .box의 수직 및 수평 중앙 정렬 효과를 얻습니다.

이 간단한 예를 통해 절대 위치 지정 참조 요소의 위치 매개변수를 설정하면 페이지에서 요소의 위치를 ​​유연하게 제어하고 정확한 레이아웃 효과를 얻을 수 있음을 알 수 있습니다. 🎜

위 내용은 절대 위치 지정의 기준점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿