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

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

절대 위치 지정은 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 상자를 컨테이너에 배치합니다. .container는 position:relative;를 .box의 참조 요소로 고정된 너비와 높이로 설정합니다. .container容器，然后在容器中放置了一个绝对定位的.box盒子。.container设置了position: relative;，作为.box的参考元素，固定了宽度和高度。

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

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

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

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