CSS에서 상대 위치 지정 및 절대 위치 지정 소개 및 사용

1. 위치의 네 가지 값: 정적, 상대, 절대, 고정.

절대 위치 지정: 절대 위치 지정과 고정 위치 지정을 합쳐서 절대 위치 지정이라고 합니다.

상대 위치 지정: 상대적

기본값: 정적

2. 상대 위치 지정과 절대 위치 지정의 차이점

예:

HTML 코드:

CSS 코드:

1.position:relative; 요소가 상대적으로 배치되면 먼저 해당 위치에 나타납니다. 그런 다음 수직 또는 수평 위치를 설정하여 원래 시작점을 기준으로 요소를 이동합니다. (한 점 더, 상대적으로 배치되면 요소는 이동 여부에 관계없이 여전히 원래 공간을 차지합니다. 따라서 요소를 이동하면 다른 상자를 덮게 됩니다.) 예: #mybox{position: relativ left: 20px; top: 20px;} 효과는 이 레이어를 시골로 만들고 왼쪽으로 20px 이동하는 것입니다.

2.position: 절대; 절대 위치 지정을 의미합니다. 절대 위치 지정은 요소를 문서 흐름과 독립적으로 만들어 공간을 차지하지 않습니다. 일반적인 문서 흐름의 요소는 절대 위치에 있는 요소가 없는 것처럼 배치됩니다. 위치는 가장 가까운 조상을 기준으로 배치됩니다. 요소에 배치된 조상이 없는 경우 위치는 가장 먼저 포함된 블록을 기준으로 합니다. (절대적으로 배치된 상자는 문서 흐름과 무관하기 때문에 페이지의 다른 요소를 덮을 수 있으며 이러한 상자의 쌓인 순서는 z-인덱스로 제어할 수 있습니다. z-인덱스 값이 높을수록 상자가 더 멀리 위치하게 됩니다. )

이제 우리가 만드는 대부분의 웹 페이지는 중앙에 있으므로 웹 페이지의 특정 요소의 위치를 ​​따르려면 이 요소가 필요합니다. 해상도에 관계없이 해당 위치는 항상 힙으로 향합니다. 페이지의 특정 요소가 있으면 단순 절대값이 작동하지 않습니다. 올바른 해결 방법은 요소의 상위 요소를 position:relative;(이것은 조부모 또는 position:absolute일 수 있음)로 정의하고 절대 위치 지정이 필요한 요소는 position:absolute;로 설정하는 것입니다. , 아래쪽, 왼쪽 값이면 충분하므로 위치 지정의 기준은 부모의 왼쪽 위 모서리 패딩의 왼쪽 위가 됩니다.

위 내용은 CSS에서 상대 위치 지정 및 절대 위치 지정 소개 및 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!