절대 위치 결정 시 기준으로 사용할 수 있는 매개변수는 무엇입니까?-CSS 튜토리얼-php.cn

절대 위치 결정 시 기준으로 사용할 수 있는 매개변수는 무엇입니까?

WBOY

풀어 주다： 2024-01-23 09:55:06

원래의

702명이 탐색했습니다.

절대 위치 결정 시 기준으로 사용할 수 있는 매개변수는 무엇입니까?

절대 위치 지정은 프런트 엔드 개발에서 일반적으로 사용되는 레이아웃 방법으로 지정된 위치에 요소를 정확하게 배치하고 위치 변경 없이 페이지 스크롤을 따라갈 수 있습니다. 절대 위치 지정을 수행할 때 요소가 원하는 위치에 정확하게 위치할 수 있도록 일부 매개변수를 참조해야 합니다. 이 문서에서는 일반적으로 사용되는 여러 매개변수를 참조로 소개하고 구체적인 코드 예제를 제공합니다.

1. 왼쪽, 위쪽, 오른쪽 및 아래쪽 매개변수

절대 위치 지정에서는 왼쪽, 위쪽, 오른쪽 및 아래쪽 매개변수를 설정하여 포함 요소를 기준으로 요소의 왼쪽, 위쪽, 오른쪽 및 아래쪽을 지정합니다. 요소의 측면 오프셋. 이러한 매개변수는 특정 픽셀 값 또는 백분율 값일 수 있습니다.

코드 예:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box"></div>
    </div>
  </body>
</html>

로그인 후 복사

위 코드에서 상자 요소는 left 및 top 매개변수를 50px로 설정하여 컨테이너 요소의 왼쪽 상단에서 50px 오프셋된 위치에 배치됩니다.

2. Z-인덱스 매개변수

절대 위치 지정을 위해 페이지에 여러 요소가 있을 수 있습니다. 이러한 요소가 겹치는 경우 Z-인덱스 매개변수를 사용하여 요소의 스택 순서를 제어할 수 있습니다. z-index 값이 더 큰 요소는 앞쪽에 더 가깝게 배치되어 다른 요소를 덮습니다.

코드 예:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
        z-index: 1;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
        z-index: 2;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

로그인 후 복사

위 코드에서 box1 요소의 z-index 값은 1이고 box2 요소의 z-index 값은 2이므로 box2 요소가 box1 요소를 덮게 됩니다.

3. 상위 요소의 위치 속성을 배치합니다.

절대 위치 지정을 수행할 때 상위 요소의 위치 속성에 주의해야 합니다. 위치가 지정된 상위 요소에 위치 속성이 설정되지 않은 경우 절대 위치 요소의 위치는 문서의 표시 영역을 기준으로 배치됩니다. 위치가 지정된 상위 요소에 위치 속성이 설정된 경우 절대 위치가 지정된 요소의 위치는 위치가 지정된 상위 요소를 기준으로 배치됩니다.

코드 예:

<!DOCTYPE html>
<html>
  <head>
    <style>
      .container {
        position: relative;
        width: 400px;
        height: 400px;
        background-color: lightgray;
      }
      .box1 {
        position: absolute;
        left: 50px;
        top: 50px;
        width: 200px;
        height: 200px;
        background-color: red;
      }
      .box2 {
        position: absolute;
        left: 100px;
        top: 100px;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="box1"></div>
      <div class="box2"></div>
    </div>
  </body>
</html>

로그인 후 복사

위 코드에서 box1 및 box2 요소의 위치 지정 상위 요소는 컨테이너 요소이므로 box1 및 box2 요소는 컨테이너 요소를 기준으로 배치됩니다.

절대 위치 지정은 프런트엔드 개발에서 매우 일반적인 레이아웃 방법입니다. 위의 매개변수를 참조하면 요소를 유연하고 정확하게 배치할 수 있습니다. 실제 개발에서는 다양한 페이지 레이아웃을 달성하기 위해 필요에 따라 이러한 매개변수를 유연하게 사용할 수 있습니다.

위 내용은 절대 위치 결정 시 기준으로 사용할 수 있는 매개변수는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!