절대위치결정을 사용하기 위해 충족해야 할 조건은 무엇입니까?

절대 위치 사용 조건은 무엇인가요? 특정 코드 예제가 필요합니다

절대 위치 지정은 일반적으로 사용되는 CSS 위치 지정 방법으로, 가장 가까운 비정적(즉, 위치 속성 값이 값인 정적 이외의 요소) 위치가 지정된 상위 요소( 본체 포함). 절대 위치 결정을 사용하기 전에 몇 가지 사용 조건과 주의 사항을 이해해야 합니다.

1. 상위 요소의 위치 속성 설정
   절대 위치를 사용하기 전에 상위 요소의 위치 속성 값이 기본 정적이 아닌 상대, 절대 또는 고정인지 확인해야 합니다. 이는 절대 위치 지정이 가장 가까운 비정적 위치 지정 상위 요소를 기준으로 위치 지정되기 때문입니다. 정규 위치 지정 상위 요소가 없는 경우 절대 위치 지정은 전체 문서를 기준으로 위치 지정되며 이는 일반적으로 원하는 결과가 아닙니다.

샘플 코드:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

2. 위치 속성을 명시적으로 설정
   상위 요소에서 위치 속성을 설정하도록 요구하는 것 외에도 하위 요소에 대해 위치 속성을 명시적으로 설정해야 합니다. 위치를 지정하려면 절대 또는 고정으로 설정하세요. 위치 지정 속성이 설정된 요소만 절대 위치 지정을 사용할 수 있습니다.

샘플 코드:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

3. 위치 지정 방법 지정
   절대 위치 지정은 위쪽, 아래쪽, 왼쪽 및 오른쪽 속성을 통해 상위 요소 가장자리로부터의 거리를 지정할 수 있습니다. 이러한 속성을 사용하여 요소의 위치를 ​​미세 조정할 수 있습니다. 위치 지정 속성의 값은 특정 픽셀 값 또는 백분율 값일 수 있습니다.

샘플 코드:
HTML:

<div class="parent">
  <div class="child">Hello World</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. z-index 속성을 사용하여 계단식 관계를 제어하세요.
   절대 위치에 있는 요소는 중첩된 계단식 관계를 가질 수 있습니다. 속성 요소의 표시 순서를 제어합니다. z-index 값이 더 큰 요소는 z-index 값이 더 작은 요소를 덮어씁니다. 위치 속성 값이 상대, 절대 또는 고정인 요소만 Z-색인 속성을 설정할 수 있습니다.

샘플 코드:
HTML:

<div class="parent">
  <div class="child" style="z-index: 1;">Hello World</div>
  <div class="child" style="z-index: 2;">I am on top</div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;
  top: 50px;
  left: 50px;
}

요약:
절대 위치 지정을 사용하려면 상위 요소에 위치 지정 속성이 설정되어 있고 하위 요소가 위치 속성을 명시적으로 설정하고 다음을 지정하는지 확인해야 합니다. 상단 및 하단, 왼쪽, 오른쪽 및 기타 위치 지정 방법. z-index 속성은 요소가 예상한 순서대로 표시되도록 계단식 관계를 제어하는 ​​데 사용할 수 있습니다.

위 내용은 절대 위치 지정 사용에 대한 몇 가지 조건과 샘플 코드입니다.

위 내용은 절대위치결정을 사용하기 위해 충족해야 할 조건은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!