포지션에는 어떤 속성이 있나요?

위치 속성의 값에는 정적, 상대, 절대, 고정, 고정 등이 포함됩니다. 자세한 소개: 1. static은 위치 속성의 기본값입니다. 즉, 요소의 위치는 HTML 문서의 순서에 따라 결정되며 변경할 수 없습니다. 위쪽, 오른쪽, 아래쪽을 통과합니다. 2. 상대 위치 지정 등을 사용하여 조정합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, DELL G3 컴퓨터.

프런트엔드 개발에서 위치는 요소의 위치를 ​​제어하는 ​​데 사용되는 CSS의 중요한 속성입니다. position 속성에는 일반적으로 사용되는 값이 다음과 같습니다.

1. static(기본값):

static은 position 속성의 기본값으로, 특별한 위치 지정 없이 일반적인 문서 흐름에 따라 요소가 배치된다는 의미입니다. 요소의 위치는 HTML 문서의 순서에 따라 결정되며 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 통해 조정할 수 없습니다.

   .element {
     position: static;
   }

2. 상대：

상대 상대 위치 지정은 요소가 일반 위치를 기준으로 위치 지정됨을 의미합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하면 문서 흐름에서 요소의 위치를 ​​미세 조정할 수 있습니다. 상대 위치 지정은 다른 요소의 레이아웃에 영향을 주지 않습니다.

   .element {
     position: relative;
     top: 10px;
     left: 20px;
   }

3. 절대:

절대 절대 위치 지정은 요소가 가장 가까운 위치에 있는 상위 요소를 기준으로 위치 지정됨을 의미합니다(위치 속성 값은 정적이 아닙니다). 위치가 지정된 상위 요소가 없으면 위치는 문서의 초기 포함 블록을 기준으로 결정됩니다. 위쪽, 오른쪽, 아래쪽, 왼쪽 속성을 설정하여 요소의 위치를 ​​정밀하게 제어할 수 있습니다.

   .element {
     position: absolute;
     top: 50px;
     left: 100px;
   }

4. 고정:

고정 위치란 요소가 브라우저 창을 기준으로 배치되고 항상 창의 고정 위치에 유지되며 스크롤해도 위치가 변경되지 않음을 의미합니다. 위쪽, 오른쪽, 아래쪽 및 왼쪽 속성을 설정하여 창에서 요소의 위치를 ​​결정할 수 있습니다.

   .element {
     position: fixed;
     top: 0;
     right: 0;
   }

5. 끈적끈적:

끈적끈적한 위치 지정은 스크롤 위치의 변화에 ​​따라 요소의 위치가 지정된다는 의미입니다. 요소가 컨테이너 내에 표시되면 해당 위치는 컨테이너를 기준으로 하며 요소가 컨테이너 밖으로 스크롤되면 컨테이너 경계에 고정됩니다. 상단, 오른쪽, 하단 및 왼쪽 속성을 설정하여 요소의 고정 위치를 제어할 수 있습니다.

   .element {
     position: sticky;
     top: 20px;
   }

위에서 일반적으로 사용되는 위치 속성 값 외에도 다음과 같이 덜 일반적으로 사용되는 값도 있습니다.

- 상속: 상위 요소의 위치 속성 값을 상속합니다.

- 초기: 위치 속성을 기본값인 static으로 재설정합니다.

- unset: 위치 속성을 기본값으로 재설정하고 상위 요소의 위치 속성 값을 상속합니다.

위치 속성의 값은 요소의 스택 순서(z-index)에 영향을 미칩니다. 위치 지정 방법에 따라 스택 순서 규칙이 달라집니다.

요약하자면, 위치 속성은 요소의 위치 지정 방법을 제어하는 ​​데 사용됩니다. 일반적으로 사용되는 값은 정적, 상대, 절대, 고정 및 고정입니다. 요소의 위치는 위쪽, 오른쪽, 아래쪽, 왼쪽 속성을 설정하여 조정할 수 있습니다. 위치 속성을 이해하고 유연하게 사용하면 보다 정확한 레이아웃 효과를 얻을 수 있습니다.

위 내용은 포지션에는 어떤 속성이 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!