>웹 프론트엔드 >프런트엔드 Q&A >CSS 위치 지정 방법은 무엇입니까?

CSS 위치 지정 방법은 무엇입니까?

青灯夜游
青灯夜游원래의
2021-04-08 18:22:4614824검색

CSS 위치 지정 방법에는 5가지 유형이 있습니다. 1. 부동 위치 지정(부동). 2. 정적(정적 위치 지정); 위치 지정이 없으면 요소가 정상적인 흐름으로 나타납니다. 3. 상대(상대적 위치 지정); 요소가 일반 문서 흐름과 분리됩니다. 4. 절대(절대 위치 지정). 5. 고정(고정 위치).

CSS 위치 지정 방법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, CSS3 버전, Dell G3 컴퓨터.

복잡한 웹 페이지 레이아웃은 다양한 웹 페이지 요소의 유연한 위치 지정을 통해 구현됩니다. 웹 페이지의 다양한 요소 위치 지정에는 고유한 특성이 있습니다. CSS의 여러 위치 지정 방법을 살펴보겠습니다.

부동 위치 지정(예: 부동 위치 지정):

이 위치 지정 방법은 매우 간단합니다(예: float:left; 이 요소가 왼쪽에 배치됨을 의미). 위치 지정은 상위 요소 컨테이너에서 상대적입니다.

요소가 부동으로 설정되면 바로 뒤의 요소가 부동의 영향을 받습니다. 따라서 후속 요소가 영향을 받지 않으면 부동은 나중에 지워야 합니다(지우기: 둘 다와 다른 방법을 사용할 수 있습니다), 인접한 두 요소가 동일한 부동 소수점으로 설정되면 두 요소가 순서대로 서로 인접하게 배치됩니다. 이 위치 지정은 문서 흐름에서 요소를 제거합니다.

위치 위치 지정:

위치 위치 지정은 일반적으로 사용되는 위치 지정입니다.

1. 정적(정적 위치 지정):

위치 지정 방법을 지정하지 않을 경우 기본 위치 지정 방법은 다음과 같습니다. 정적, 즉 문서의 쓰기 레이아웃에 따라 적절한 위치에 자동으로 할당됩니다. 이 위치 지정 방법은 여백을 사용하여 위치를 변경하며 왼쪽, 위쪽, Z-색인 및 기타 설정 값에는 유효하지 않습니다.

2. 상대 위치 지정:

이 위치 지정은 왼쪽, 위쪽 및 기타 값을 설정하여 이 위치를 기준으로 지정된 요소를 오프셋할 수 있습니다.

3. 절대 위치 지정(absolute positioning):

위, 오른쪽, 오프셋 값을 설정하여 정적 위치 지정이 아닌 첫 번째 상위 요소를 기준으로 위치 지정합니다. 하단 및 왼쪽(이 위치는 일반적으로 상대 위치 지정과 함께 사용되는 상위 요소를 설정함), 상위 요소가 없는 경우 해당 참조는 문서 흐름을 벗어난 본문입니다.

4. :

이 위치 지정 방법은 전체 문서를 기준으로 합니다. 각 방향을 기준으로 오프셋 값을 설정하면 페이지의 고정 위치에 요소를 고정할 수 있습니다. 일반적으로 일부 프롬프트 정보를 표시하고 문서 흐름에서 벗어나는 데 사용됩니다.

(학습 영상 공유: css 영상 튜토리얼 )

위 내용은 CSS 위치 지정 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.