다음과 같은 5가지 일반적인 절대 위치 지정 방법을 잘 알고 계십니까?

5가지 일반적인 절대 위치 지정 방법을 모두 알고 계시나요?

절대 위치 지정은 CSS에서 일반적으로 사용되는 위치 지정 방법으로, 가장 가까운 위치에 있는 상위 요소를 기준으로 요소의 위치를 ​​지정할 수 있습니다. 이 기사에서는 절대 위치 지정의 다섯 가지 일반적인 방법을 다루고 각 방법에 대한 구체적인 코드 예제를 제공합니다.

1. 상단, 오른쪽, 하단, 왼쪽 위치 지정

가장 일반적인 절대 위치 지정 방법은 위치 요소에 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 사용하는 것입니다. 이러한 속성의 값을 지정하면 상위 요소를 기준으로 요소의 위치를 ​​제어할 수 있습니다.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; right: 10px;">我在右上角</div>
</div>

위 코드는 두 번째 div 요소를 상위 요소의 오른쪽 상단, 위쪽 및 오른쪽에서 10픽셀 떨어진 위치에 배치합니다.

2. 백분율 위치 지정

특정 픽셀 값을 사용하는 것 외에도 백분율을 사용하여 요소를 배치할 수도 있습니다. 백분율 위치 지정은 상위 요소의 너비와 높이를 기준으로 합니다. 예를 들어 50%를 사용하여 요소를 가로 중앙에 배치할 수 있습니다.

<div style="position: relative;">
  <div style="position: absolute; left: 50%;">我水平居中</div>
</div>

위 코드는 두 번째 div 요소를 상위 요소의 가로 중앙에 배치합니다.

3. 오프셋 위치 지정

오프셋 위치 지정은 원래 위치에서 오프셋을 지정하여 요소를 배치하는 것입니다. 요소를 위쪽이나 왼쪽으로 이동하려면 음수 값을 사용하고 요소를 아래쪽이나 오른쪽으로 이동하려면 양수 값을 사용할 수 있습니다.

<div style="position: relative;">
  <div style="position: absolute; top: -20px; left: -20px;">我向上和向左偏移了</div>
</div>

위 코드는 두 번째 div 요소를 위쪽 왼쪽으로 20픽셀만큼 이동합니다.

4. 스태킹 위치 지정

스태킹 위치 지정은 요소의 z-index 속성을 지정하여 요소의 스택 순서를 제어하는 ​​것을 의미합니다. 요소의 z-index 값이 클수록 더 높게 표시됩니다.

<div style="position: relative;">
  <div style="position: absolute; top: 10px; left: 10px; z-index: 1;">我在上面</div>
  <div style="position: absolute; top: 20px; left: 20px; z-index: 2;">我在下面</div>
</div>

위 코드는 첫 번째 div 요소 위에 두 번째 div 요소를 표시합니다.

5. 고정 위치 지정

고정 위치 지정은 스크롤 막대가 어떻게 이동하든 요소가 브라우저 창의 위치를 ​​기준으로 위치가 고정되는 것을 의미합니다.

<div style="position: fixed; top: 10px; right: 10px;">我固定在右上角</div>

위 코드는 요소를 브라우저 창의 오른쪽 상단에 고정합니다.

5가지 일반적인 절대 위치 지정 방법을 익히면 웹 페이지의 요소를 보다 유연하게 제어하고 레이아웃할 수 있습니다. 이 글이 CSS 절대 위치 지정을 이해하고 사용하는 데 도움이 되기를 바랍니다.

위 내용은 다음과 같은 5가지 일반적인 절대 위치 지정 방법을 잘 알고 계십니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!