절대 위치 지정의 공통 속성 값을 익히고 페이지 요소를 원하는 대로 배치하세요.

페이지 요소를 원하는 대로 배치할 수 있도록 절대 위치 지정의 공통 속성 값을 숙지하세요. 구체적인 코드 예제가 필요합니다.

절대 위치 지정(절대 위치 지정)은 일반적으로 사용되는 위치 지정 방법 중 하나입니다. CSS에서는 위치 지정 속성을 사용하여 가장 가까운 상위 요소를 기준으로 요소의 위치를 ​​지정할 수 있습니다. 절대 위치 지정의 공통 속성 값을 익히면 페이지 요소의 위치와 레이아웃을 쉽게 제어할 수 있습니다.

1. 위치 지정 요소의 기본 개념

절대 위치 지정을 사용하기 전에 몇 가지 기본 개념을 이해해야 합니다. 상위 요소는 위치 지정 속성이 있는 상위 요소를 참조하고, 하위 요소는 위치를 지정해야 하는 요소를 참조합니다. 절대 위치 지정을 사용할 때 위쪽, 아래쪽, 왼쪽, 오른쪽과 같은 속성 값을 설정하여 하위 요소의 위치를 ​​조정할 수 있습니다.

2. 절대 위치 지정의 공통 속성 값

절대 위치 지정에서는 요소의 위치와 레이아웃을 제어하기 위해 다음 속성 값을 자주 사용합니다.

(1) 상단 속성

상위 속성을 설정하여 값을 사용하면 하위 요소와 상위 요소 상단 사이의 거리를 지정할 수 있습니다. 샘플 코드는 다음과 같습니다.

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    top: 50px;   /* 子元素距离父元素顶部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(2) 하단 속성

하단 속성 값을 설정하여 하위 요소와 상위 요소 하단 사이의 거리를 지정할 수 있습니다. 샘플 코드는 다음과 같습니다.

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    bottom: 50px;   /* 子元素距离父元素底部的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(3) left attribute

left 속성 값을 설정하여 하위 요소와 상위 요소의 왼쪽 사이의 거리를 지정할 수 있습니다. 샘플 코드는 다음과 같습니다.

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    left: 50px;   /* 子元素距离父元素左侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

(4) right attribute

right 속성 값을 설정하여 하위 요소와 상위 요소의 오른쪽 사이의 거리를 지정할 수 있습니다. 샘플 코드는 다음과 같습니다.

<style>
  .parent {
    position: relative;  /* 父元素的定位方式 */
    height: 200px;
    width: 200px;
    background-color: yellow;
  }
  .child {
    position: absolute;   /* 子元素的定位方式 */
    right: 50px;   /* 子元素距离父元素右侧的距离为50px */
    height: 100px;
    width: 100px;
    background-color: red;
  }
</style>
<div class="parent">
  <div class="child"></div>
</div>

3.Notes

절대 위치 지정을 사용할 경우 다음 사항에 주의해야 합니다.

(1) 상위 요소에 위치 지정 속성을 설정해야 합니다

상위 요소의 경우 위치 지정 속성(위치: 상대/절대/고정)을 설정하지 않으면 위쪽, 아래쪽, 왼쪽, 오른쪽 속성을 통해 자식 요소의 위치를 ​​지정할 수 없습니다.

(2) 하위 요소의 너비와 높이는 상위 요소를 기준으로 설정됩니다.

절대 위치 지정에서 하위 요소의 너비와 높이는 일반적으로 상위 요소를 기준으로 설정됩니다. 물론 백분율을 사용하여 너비와 높이를 설정하고 상위 요소의 크기에 따라 조정할 수도 있습니다.

(3) 요소 위치 겹침

절대 위치 지정을 사용할 때 하위 요소의 위치가 겹치면 뒤에 있는 하위 요소가 이전 하위 요소를 덮습니다.

결론

절대 위치 지정의 공통 속성 값을 익히면 페이지 요소의 자유로운 배치를 쉽게 구현할 수 있습니다. 그러나 실제 사용에서는 페이지 레이아웃의 아름다움과 가독성을 보장하기 위해 부모 요소와 자식 요소의 위치 속성 및 요소 위치의 중첩을 합리적으로 설정하는 데 주의를 기울여야 합니다.

위 내용은 절대 위치 파악을 위한 공통 속성 값에 대한 소개입니다. 모든 분들께 도움이 되길 바랍니다. 실제로 작성된 코드는 이러한 속성 값을 더 잘 이해하고 숙달하여 페이지 요소를 원하는 대로 배치할 수 있도록 도와줄 것이라고 믿습니다.

위 내용은 절대 위치 지정의 공통 속성 값을 익히고 페이지 요소를 원하는 대로 배치하세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!