CSS 포지셔닝은 X, Y 좌표 이상입니다.
CSS 포지셔닝은 오랫동안 웹 사이트 레이아웃을 만드는 중요한 부분이었습니다. Flexbox 및 CSS Grid와 같은 새로운 CSS 레이아웃 기술이 등장하더라도 웹 디자이너는 여전히 트릭의 중요한 부분을 차지하고 있습니다.
CSS 위치 지정을 사용할 때 가장 먼저해야 할 일은 주어진 요소에 대해 절대 위치 또는 상대 위치를 사용하려는 경우 브라우저에 위치를 알려주는 CSS 속성을 설정하는 것입니다. 이 두 위치 지정 특성의 차이점을 명확하게 이해해야합니다.
절대 및 상대는 웹 디자인에서 가장 자주 사용되는 두 CSS 위치 속성이지만 position 속성에는 실제로 네 가지 상태가 있습니다.
- 공전
- 순수한
- 상대적인
- 결정된
Static은 웹 페이지의 모든 요소에 대한 기본 위치입니다. 요소의 위치를 정의하지 않으면 정적입니다. 즉, HTML 문서의 위치 와 해당 문서의 정상적인 흐름 내에서 어떻게 표시되는지에 따라 화면에 표시됩니다.
정적 위치가있는 요소에 위 또는 왼쪽과 같은 위치 지정 규칙을 적용하면 해당 규칙은 무시되고 요소는 일반 문서 플로우에서 나타나는 위치에 그대로 유지됩니다. 사실, CSS에서 정적 위치로 요소를 설정해야하는 경우가 거의 없으므로 이것이 기본값입니다.
절대 CSS 포지셔닝
절대 위치 지정은 아마도 이해하기 쉬운 CSS 위치 일 것입니다. 이 CSS 위치 속성으로 시작합니다.
위치 : 절대;이 값은 브라우저에 문서의 정상적인 흐름에서 제거되어야하며 페이지의 정확한 위치에 배치되어야한다는 것을 알려줍니다. 이 값은 요소에서 가장 가까운 정적으로 배치 된 조상을 기반으로 계산됩니다.
절대적으로 배치 된 요소는 문서의 정상적인 흐름에서 벗어나기 때문에 HTML의 앞이나 뒤의 요소가 웹 페이지에 배치되는 방식에 영향을 미치지 않습니다.
예를 들어, 상대 값을 사용하여 위치가 지정된 부서 (이 값을 곧 살펴볼 것입니다.)와 해당 부서 내부에 부서의 상단에서 50 픽셀을 배치하고자하는 단락이있는 경우 이처럼 "top"속성에 50px의 오프셋 값과 함께 해당 단락에 "절대 값"의 위치 값을 추가합니다.
위치 : 절대; 상단 : 50 픽셀;이 절대 위치 요소는 정상적인 흐름에서 다른 어떤 표시가 있더라도 상관없이 항상 상대적으로 위치가 지정된 부문의 상단에서 50 픽셀을 표시합니다. 귀하의 "절대적으로"배치 된 요소는 상대적으로 배치 된 요소를 컨텍스트로 사용했고 귀하가 사용하는 긍정적 인 가치는 상대적입니다.
사용할 수있는 네 가지 위치 지정 속성은 다음과 같습니다.
- 상단
- 권리
- 바닥
- 왼쪽
위 또는 아래 (이 값에 따라 요소를 배치 할 수 없으므로)와 오른쪽 또는 왼쪽을 사용할 수 있습니다.
요소가 절대 위치로 설정되었지만 비 정적으로 배치 된 조상을 가지지 않으면 페이지의 최상위 요소 인 body 요소를 기준으로 배치됩니다.
상대 위치 지정
우리는 이미 상대적 위치를 언급 했으므로 이제 그 속성을 살펴 보겠습니다.
상대 위치 지정은 절대 위치 지정과 동일한 네 가지 위치 지정 특성을 사용하지만 요소의 위치를 가장 정적이 아닌 가장 가까운 위치에 배치하는 대신 요소가 정상 흐름 인 경우 요소의 위치에서 시작합니다.
예를 들어 웹 페이지에 세 개의 단락이 있고 세 번째 단락에 "위치 : 상대"스타일이있는 경우 위치는 현재 위치에 따라 오프셋됩니다.
1 항.
2 항.
3 항.
위의 예에서 세 번째 단락은 컨테이너 요소의 왼쪽에서 2em이지만 두 번째 단락 아래에 위치합니다. 그것은 문서의 정상 흐름에 머물러있을 것이고, 단지 약간 상쇄 될 것입니다. position으로 변경하면 : absolute; 문서의 정상적인 흐름에 더 이상 빠져 나가지 않기 때문에 그 다음에 오는 것은 그 위에 표시됩니다.
웹 페이지의 요소는 종종 위치 값을 설정하는 데 사용됩니다. 즉, 오프셋 값이 설정되지 않은 상대 값입니다. 즉 요소는 정상적인 흐름에서 나타날 위치와 정확히 일치 함을 의미합니다. 이것은 다른 요소를 절대적으로 배치 할 수있는 컨텍스트로 해당 요소를 설정하기 위해서만 수행됩니다. 예를 들어 전체 웹 사이트를 "컨테이너"(웹 디자인에서 매우 일반적인 시나리오)로 둘러싼 부서가있는 경우 해당 부서를 상대적 위치로 설정하여 내부의 모든 항목을 사용할 수 있습니다 그것은 포지셔닝 컨텍스트로.
고정 위치 결정이란 무엇입니까?
고정 위치는 절대 위치와 매우 비슷합니다. 요소의 위치는 절대 모델과 같은 방식으로 계산되지만, 고정 요소는 그 위치에 고정됩니다 (거의 워터 마크 처럼). 그러면 페이지의 다른 모든 요소가 해당 요소를지나 스크롤됩니다.
이 속성 값을 사용하려면 다음을 설정합니다.
위치 : 고정;사이트에서 요소를 수정하면 웹 페이지가 인쇄 될 때 해당 위치에 요소가 인쇄됩니다. 예를 들어, 요소가 페이지 상단에 고정되면 페이지 상단에 고정되어 있기 때문에 모든 인쇄 된 페이지의 맨 위에 나타납니다. 용지 유형을 사용하여 인쇄 된 페이지가 고정 된 요소를 표시하는 방법을 변경할 수 있습니다.
@ 미디어 화면 {h1 # first {위치 : 고정; }} @media print {h1 # first {위치 : 정적; }}Jennifer Krynin의 원본 기사입니다. Jeremy Girard에 의해 1/7/16에 편집 됨.