>  기사  >  웹 프론트엔드  >  CSS에서 상대 위치 지정 및 절대 위치 지정 소개 및 사용

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

零下一度
零下一度원래의
2017-07-20 13:21:432160검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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