>  기사  >  웹 프론트엔드  >  위치의 여러 속성의 기능은 무엇입니까?

위치의 여러 속성의 기능은 무엇입니까?

王林
王林앞으로
2020-06-16 16:24:545036검색

위치의 여러 속성의 기능은 무엇입니까?

위치의 네 가지 일반적인 속성 값은 상대, 절대, 고정, 정적입니다. 일반적으로 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성과 함께 사용됩니다.

아래에서 자세히 설명하겠습니다.

static: 기본 위치

일반적인 상황에서는 구체적으로 선언할 필요가 없지만 때로는 상속을 만날 때 요소의 상속을 보고 싶지 않을 때가 있습니다. 속성은 자체적으로 영향을 미치므로 Position:static을 사용하여 상속을 취소할 수 있습니다. 즉, 요소 ​​위치 지정의 기본값을 복원할 수 있습니다. static으로 설정된 요소는 항상 페이지 흐름에 의해 지정된 위치에 있습니다(정적 요소는 위쪽, 아래쪽, 왼쪽 또는 오른쪽 선언을 무시합니다). 일반적으로 사용되지 않습니다.

상대: 상대 위치 지정

상대 위치 지정은 요소의 기본 위치를 기준으로 하며, 오프셋 상단, 오른쪽, 하단 및 왼쪽 값은 모두 다른 요소에 관계없이 원래 위치를 기준으로 오프셋됩니다. 일어날 것입니다. 상대적으로 이동된 요소는 여전히 원래 위치에서 공간을 차지합니다.

absolute: 절대 위치 지정 요소

가 절대값으로 설정됩니다. 상위 컨테이너에 위치 속성이 설정되어 있고 위치 속성 값이 절대 또는 상대이면 상위 컨테이너에 따라 오프셋됩니다. 상위 컨테이너가 위치 속성을 설정하지 않은 경우 오프셋은 본문을 기반으로 합니다. 절대 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.

fixed: 고정 위치 지정

위치가 고정으로 설정된 요소는 브라우저 창을 기준으로 지정된 좌표에 배치될 수 있습니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. 항상 신체를 기반으로합니다. 고정 속성이 설정된 요소는 표준 흐름에서 위치를 차지하지 않습니다.

추천 튜토리얼: 빠른 시작 CSS

위 내용은 위치의 여러 속성의 기능은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 juejin.im에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제