CSS 위치 지정 예 설명

小云云원래의: 2018-02-02 10:46:391434검색

이 글은 주로 CSS 위치 지정 튜토리얼을 소개합니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라가서 모두에게 도움이 되기를 바랍니다.

1. 문서 흐름

간단히 말하면 HTML에서 요소를 위치 순서에 따라 배열하는 과정입니다. HTML의 레이아웃 메커니즘은 문서 흐름 모델을 사용합니다. 즉, 블록 요소는 한 줄을 차지하고 인라인 요소는 한 줄을 차지하지 않습니다.

일반적으로 여백은 요소를 서로 분리하는 데 사용되며 패딩은 요소와 콘텐츠를 분리하는 데 사용됩니다. 여백은 요소가 서로 독립적이도록 레이아웃에 사용되며 콘텐츠(텍스트)와 (래핑된) 요소 사이의 "거리"를 허용하기 위해 요소와 콘텐츠 사이의 공간에 패딩이 사용됩니다. 부동 또는 절대 위치에 배치되지 않는 한 문서 흐름에 포함됩니다.

2. 위치 속성 소개

정적, 기본값입니다. 위치가 정적으로 설정된 요소는 항상 문서 흐름에 의해 지정된 위치에 있습니다.
inherit는 위치 속성의 값이 상위 요소에서 상속되어야 함을 지정합니다. 그러나 Internet Explorer의 모든 버전(IE8 포함)은 "inherit" 속성 값을 지원하지 않습니다.
고정, 절대 위치에 있는 요소를 생성합니다. 기본적으로 브라우저 창을 기준으로 지정된 좌표에 위치를 지정할 수 있습니다.
요소의 위치는 "left", "top", "right" 및 "bottom" 속성을 통해 지정됩니다. 요소는 창이 스크롤되는지 여부에 관계없이 해당 위치에 유지됩니다. 그러나 조상 요소에 변환 속성이 있고 없음이 아닌 경우 좌표는 브라우저 창이 아닌 조상 요소를 기준으로 지정됩니다.
absolute는 요소에 가장 가까운 위치의 상위 요소를 기준으로 위치가 지정된 절대 위치 요소를 생성합니다.
이 요소의 위치는 "왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 지정할 수 있습니다.
relative는 문서에서 요소의 초기 위치를 기준으로 상대적으로 배치된 요소를 생성합니다.
"왼쪽", "위쪽", "오른쪽" 및 "아래쪽" 속성을 통해 자체 위치를 기준으로 이 요소의 오프셋을 설정합니다.

3. 상대 위치 지정

상대 위치는 일반 위치를 기준으로 상대적으로 위치가 지정된 요소를 생성합니다.

상대 위치 지정 프로세스는 다음과 같습니다.

기본 방식(정적)으로 요소를 생성합니다(요소는 레이어처럼 떠다닙니다). 이전 위치 이동을 기준으로 이동 방향과 진폭은 왼쪽, 오른쪽, 위쪽 및 아래쪽 속성에 따라 결정됩니다. 오프셋 전 위치는 변경되지 않습니다.

  <style type="text/css">     
        #box1 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        #box2 {
            margin: 20px;
            width: 200px;
            height: 200px;
            background-color: red;
            /*position: relative;
            left: 100px;
            top: 100px;*/
        }
  </style>
  <p id="box1"></p>
  <p id="box2"></p>

box2의 주석 코드가 적용되기 전에 문서 흐름에 따라 정렬되어 표시됩니다.

그러나 주석 코드가 주석 해제되어 적용되면 문서 흐름에서 표시되어야 하는 위치를 기준으로 이동합니다.

그래서 상대 위치 지정의 기준 대상은 그 자체입니다.

4. 절대 위치 지정

절대 위치 지정과 상대 위치 지정의 큰 차이점은 요소를 절대 위치 지정으로 설정하면 이 요소가 문서 흐름에서 벗어나고 다른 요소가 이 요소를 다음과 같이 생각한다는 것입니다. 문서 스트림에 존재하지 않으며 원래 위치를 채웁니다. 절대 위치 지정 요소는 상위 요소의 위치 지정 설정에 따라 결정되는 참조를 기준으로 위치를 이동합니다.

상위 요소의 위치 지정 설정을 기반으로 하는 소위 결정은 간단히 다음과 같이 이해됩니다. 요소의 가장 가까운 위치에 있는 조상 요소와 관련하여, 위치 지정이 설정된 조상 요소가 없으면 참조 개체는 본문입니다. 층.

상위 요소의 위치가 지정되지 않은 경우 절대값을 사용하세요. 이 경우 참조 객체는 본체입니다.
조상 요소에는 위치 지정이 있습니다. 조상 요소가 position:static 이외의 값으로 설정되어 있으면 위치 지정이 있는 것으로 간주되며, 가장 가까운 조상 요소가 절대 위치 지정 요소의 참조로 설정됩니다. 이 경우 참조는 가장 가까운 상위 요소입니다.
왼쪽/오른쪽 및 위쪽/아래쪽이 설정되지 않은 경우 절대 요소의 위치는 문서 흐름의 요소 위치가 됩니다.

CSS 위치 지정 예 설명

관련 기사