CSS: 위치 위치 지정 속성 및 예제 애플리케이션 요약

위치 위치 지정 속성

위치는 CSS에서 매우 중요한 속성으로 절대(절대 위치 지정), 상대 위치 지정(상대 위치 지정), 정적(정적 위치 지정, 기본값), 고정(고정 위치 지정)의 네 가지 유형이 있습니다. position 속성을 사용하면 일반 위치, 상위 요소 또는 브라우저 창을 기준으로 요소의 오프셋을 지정할 수 있습니다. 위치는 초보자가 쉽게 혼동할 수 있는 속성이기도 합니다. 현재 거의 모든 주류 브라우저는 위치 속성을 지원합니다. 다음 기사에서는 위치 위치 지정 속성과 CSS의 적용에 대해 설명합니다.

PHP 중국어 웹사이트

1. "HTML+CSS 기본 입문 튜토리얼"

2에서

Positioning of CSS Basic Tutorial

장을 배우세요. . "손끝에서 CSS 배우기"中CSS Positioning 비디오 튜토리얼

위치 측위 관련 애플리케이션

1. in css

절대 위치 지정은 문서 흐름에서 완전히 제거되며, 이전에 요소가 차지했던 공간도 재활용됩니다. 절대 위치 지정 요소는 위치 지정 컨텍스트에 따라 위치가 지정됩니다.

주의해야 할 점: 절대 위치 지정이 인라인 요소를 블록 수준 요소로 변환할 수 있다고 여기에 기록되어 있습니다. 그러나 확실한 것은 인라인 요소가 절대 위치에 있으면 요소의 위치를 ​​파악하기 어렵다는 것입니다(이유: 요소에 내부 및 외부 여백이 설정되어 있지 않고 앞, 뒤, 왼쪽, 오른쪽으로 설정하면 요소는 일시적으로 원래 위치에 유지되지만 요소에 여백이 설정된 경우 요소는 앞면, 뒷면에 절대 위치가 설정된 요소가 있는 경우 임시로 원래 위치에서 한 칸 떨어진 위치에 유지됩니다. , left, right 요소는 절대적 위치에 있는 요소 아래에 없는 상위 요소를 찾습니다. ) 따라서 절대 위치 지정을 설정한 경우에는 요소의 상단과 왼쪽을 즉시 배치합니다.

2.

CSS 위치에서 상대 위치와 절대 위치의 차이를 구문 분석합니다.

위치에는 정적, 상속, 고정, 절대, 상대 속성이 있습니다.

처음 세 가지는 이해하고 구별하기 쉽습니다.
정적: 기본 상태, 위치 지정 없음, 요소는 일반 흐름으로 나타납니다(상단, 하단, 왼쪽, 오른쪽 또는 Z-인덱스 선언 무시).
nherit: 상위 요소에서 position 속성 값을 상속받습니다.
고정: 브라우저 창을 기준으로 절대 위치에 있는 요소를 생성합니다. (즉, 브라우저를 스크롤할 때 해당 요소는 항상 창의 보이는 영역의 특정 위치에 표시됩니다.)

3.

CSS 위치 지정 사용 소개

절대 및 고정

특징:

a 블록 수준 요소의 너비는 정의되지 않은 경우 더 이상 100%가 아니지만 다음에 따라 자동으로 조정됩니다. 콘텐츠

b. z-index를 정의하지 않으면 절대 요소가 다른 요소와 겹칩니다.

c. 플로팅 후의 효과와 유사하게 일반적인 문서 흐름에서 벗어나 더 이상 공간을 차지하지 않습니다.

absolute는 정적이 아닌 이전 상위 요소를 기준으로 한 절대 위치 지정입니다. 상위 요소의 위치가 지정되지 않은 경우 절대값은 전체 HTML 문서를 기준으로 절대적으로 위치 지정됩니다.

4.

CSS에서 위치 속성을 사용한 위치 지정 방법 설명

정적 위치 지정 요소는 위쪽, 오른쪽, 아래쪽, 왼쪽 및 z-index 속성으로 선언된 모든 값을 무시합니다. 요소가 이 다섯 가지 속성을 사용하려면 먼저 절대, 상대, 고정, 위치 세 가지 값 중 하나를 위치 속성에 적용해야 합니다. 상속 값이 있는 요소는 상속된 값과 동일합니다. 다른 모든 속성의 경우 요소는 상위 요소의 위치 값을 상속합니다.

5.

CSS의 네 가지 위치 지정 방법 요약

표준 문서 흐름에서 벗어남

특징: (1) 이 요소에 상위 요소가 없으면 향후 브라우저 창을 기준으로 위쪽, 왼쪽, 오른쪽 및 아래쪽이 배치됩니다.

　 (2) 절대 위치에 있는 요소에 상위 요소가 있지만, 상위 요소는 상대적인 위치 지정이 아니며, 이때 위쪽, 왼쪽, 오른쪽 및 아래쪽은 여전히 ​​탐색 창을 기준으로 위치가 지정됩니다.　　　 부모를 통과하고 부모 부모 요소에 위치 지정(비정적)이 있는 경우 절대 위치 지정 요소는 탐색 창을 기준으로 배치됩니다. 오프셋은 자체 상위 요소를 기반으로 합니다

　　　 (4) 절대 위치 지정 이후의 요소는 페이지의 위치를 ​​차지하지 않습니다

6.

CSS 위치 지정 및 부동 float

a 기본값이 100%인 경우 너비 p의 경우 절대 위치 지정이 추가되면 요소는 즉시 인라인 차단되고 기본 너비는 요소의 내부 너비에 맞춰 조정됩니다. 페이지의 너비와 높이가 축소됩니다.

b. 일반적인 페이지 레이아웃의 경우 절대 위치 지정의 유연성으로 인해 문제를 방지하기 위해 절대/상대/상단/왼쪽/z-색인을 남용하기 쉬우며, 이로 인해 향후 확장 및 유지 관리에 문제가 발생할 수 있습니다. . 문제

관련 질문과 답변1.

위치:절대를 사용하지 않고 유사한 기능을 구현하는 방법

2.모바일에서 위치:수정됨; position 고정 웹 페이지 질문: 순수 CSS로 만든 드롭다운

4. position: 고정 속성을 설정한 후 div가 브라우저에서 어떻게 왼쪽과 오른쪽으로 움직일 수 있나요?

【관련 추천】

1. PHP 중국어 웹사이트의 무료 튜토리얼:

"CSS 0 기본 입문 튜토리얼"

2. PHP 중국어 웹사이트의 무료 비디오 튜토리얼:

"php.cn Dugu Jiujian (2) - CSS 비디오 튜토리얼》

위 내용은 CSS: 위치 위치 지정 속성 및 예제 애플리케이션 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!