CSS 위치는 요소의 위치 지정 방법을 설정합니다.

1. 소개

CSS의 위치 속성은 요소의 위치 지정 방법을 설정하고 위치를 지정할 요소의 위치 지정 규칙을 정의합니다. 이 속성은 애니메이션 효과를 스크립팅하는 데 유용합니다.

1. 위치 지정 요소는 계산된 위치 속성이 상대(relative), 절대(absolute), 고정(fixed) 또는 고정(sticky)으로 구분되는 요소입니다.

2. 위쪽, 오른쪽, 아래쪽, 왼쪽 속성은 위치가 지정된 요소의 위치를 ​​지정합니다.

3. Z-index는 위치 지정 요소의 스택 순서, 즉 z축의 위치를 ​​설정합니다. 값은 양수 또는 음수일 수 있습니다. 사용자(즉, 표시 수준이 높을수록), 값이 작을수록 사용자로부터 멀어집니다.

그림과 같이 z-index 값이 -1이면 이미지의 위치는 텍스트 아래에 있고 z 값이 사용자로부터 멀리 떨어져 있습니다. -색인은 양수로 설정됩니다. 그림의 위치는 텍스트의 일부를 덮고 텍스트 위에 표시됩니다!

그리고 z-index 값을 양수로 설정하면 이미지의 위치가 텍스트 위에 표시되어 텍스트의 일부를 가리게 됩니다. ! left:20px는 그림과 왼쪽 테두리 사이의 거리가 20px임을 의미하고, top:20px는 그림과 상단 사이의 거리가 20px임을 의미합니다.

2. 값 가져오기

static

이 키워드를 사용하면 이 요소가 정상적인 동작을 사용하게 됩니다. 즉, 요소가 문서 흐름에 있습니다. 현재 레이아웃 위치, 위쪽, 오른쪽, 아래쪽, 왼쪽 및 Z-색인 속성이 유효하지 않습니다.

상대

요소가 배치되지 않은 것처럼 배치하려면 이 키워드를 사용하세요. 즉, 레이아웃을 변경하지 않고 요소의 위치에 적응합니다(요소가 원래 있던 자리에 빈 공간이 남습니다). position:relative는 테이블-*-그룹, 테이블 행, 테이블 열, 테이블 셀, 테이블 캡션에 유효하지 않습니다.

절대

요소는 가장 가까운 비정적 위치의 상위 요소로부터 오프셋을 지정하여 위치를 지정합니다. 확실하게. 절대적으로 배치된 요소에는 여백이 설정될 수 있으며 다른 여백과 병합되지 않습니다.

fixed

는 요소를 위한 공간을 예약하지 않습니다. 화면 뷰포트를 기준으로 위치를 지정하여 요소의 공간을 지정하며, 화면이 스크롤될 때 요소의 위치는 변경되지 않습니다. 요소는 인쇄 시 각 페이지의 고정된 위치에 나타납니다. 고정 속성은 일반적으로 새로운 스택 환경을 생성합니다.

위의 CSS 위치 설정 요소 위치 지정 방법에 대한 자세한 설명은 모두 편집자가 공유한 내용이므로 참고가 되셨으면 좋겠습니다. PHP 중국어도 지원해 주시길 바랍니다. 웹사이트.

CSS 위치 설정, 요소 위치 지정 방법에 대한 더 많은 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!