CSS 포지셔닝 소개

포지셔닝은 다른 항목에 비해 한 항목의 위치를 정의합니다. 이것은 듣기에는 간단하지만, CSS 포지셔닝은 좀 까다로울 수 있습니다.요소를 서로 겹치거나 브라우저 뷰포트에서 항상 같은 위치를 유지하도록 하여 CSS 배치라는 정상적인 문서 흐름에서 요소를 제거합니다.본고에서 우리는 서로 다른 위치 속성과 그것을 어떻게 사용하는지 연구할 것이다.
선결 조건: 기본 HTML 및 CSS 지식
배치의 주요 목적은 위에서 설명한 대로 문서 흐름의 요소를 덮어쓰는 기본 동작입니다.요소의 위치를 변경하려는 경우 페이지가 얼마나 스크롤되었든 상관없이 부동 또는 브라우저 윈도우 내에서 동일한 위치에 있는 UI 요소를 만듭니다.
우리는 많은 포지셔닝 속성을 사용할 수 있다. 원소에서 특정 유형의 포지셔닝을 활성화하기 위해 우리는 position 속성을 사용한다.

정적 위치추적.

이것은 모든 요소가 얻는 기본 위치입니다.요소는 문서 레이아웃 흐름에서 여전히 정상적인 위치에 스택되며 CSS에서 이 속성을 사용하면 요소의 위치가 변경되지 않습니다.이 점을 보여주기 위해서, 우리는 'box-1' 의div 요소를 만들었습니다.<div class="box-1">Static</div>이제 위div에 추가된class 속성을 인용하여 다음 CSS 속성을 추가할 수 있습니다.

.box-1 {
background-color: #edfcae;
height: 50px;
width: 50px;
}

브라우저를 살펴보면 다음과 같이 왼쪽 위 모서리에 요소가 매우 예쁘게 표시됩니다.
.
이제 정적 위치 속성을 아래 요소에 추가합니다.

.box-1 {
  position: static;
}

만약 우리가 브라우저에서 우리의 요소를 미리 본다면, 우리는 어떠한 변경도 주의하지 않을 것이다. 이것은 매우 멋있다. 우리가 전에 말한 바와 같이 정적 포지셔닝은 기본 행위이다.

상대 포지셔닝.

이것은 정적 포지셔닝과 유사하지만, 우리는 원소가 정상적인 레이아웃 흐름에서 위치를 차지한 후에 최종 위치를 수정할 수 있으며, 이는 원소가 페이지 레이아웃에서 서로 중첩될 수 있도록 하는 것을 포함한다.
계속해서 아래에 다른 상자를 만듭시다<div class="box-2">Relative</div>

.box-2 {
    background-color: #f5ab57;
    color: #000;
    text-align: center;
    height: 50px;
    width: 50px;
    position: relative;
}

만약 우리가 브라우저를 미리 보았다면, 우리는 브라우저가 우리의 '정적' 상자 아래에 완전히 쌓여 있는 것을 볼 수 있을 것이다.

그러면 우리는 어떻게 원소의 위치를 수정합니까?이것이 바로 우리가 소개한 top,bottom,left와 right의 속성이다.

위, 아래, 왼쪽, 오른쪽.

이러한 속성은 로케이션 요소를 이동할 위치를 정확하게 지정하기 위해 position와 함께 사용됩니다.
다음 CSS 업데이트

.box-2 {
    background-color: #f5ab57;
    color: #000;
    text-align: center;
    height: 50px;
    width: 50px;
    position: relative;
    top: 30px;
    left: 100px;
}

이러한 속성의 값은 픽셀, rem, em,%e.t.c와 같은 사용 가능한 CSS 단위를 사용할 수 있습니다.
현재, 만약 우리가 브라우저를 미리 본다면, 우리는 비슷한 변화를 발견할 수 있을 것이다

재밌지?네, top와left 속성을 요소에 분배함으로써 요소30px를 기본 위치의 맨 위에서 이동하고 100px를 기본 위치의 왼쪽에서 이동합니다.

절대 포지셔닝.

절대 포지셔닝은 완전히 다른 결과를 보여 줍니다. 다른 '위치' 속성을 '절대' 로 설정하는 상자를 만들어 보겠습니다.<div class="box-3">Absolute</div>

.box-3 {
    background-color: #59b1da;
    color: #fff;
    text-align: center;
    height: 50px;
    width: 120px;
    position: absolute;
}

저장하고 새로 고치면 다음과 같습니다.

우선, 우리는 '절대' 상자와 '상대' 상자가 겹치는 것을 주의해야 한다. 웹 페이지의 나머지 요소는 절대 상자가 더 이상 존재하지 않는 것처럼 어느 정도에 이것은 사실이다.일반 문서 레이아웃 흐름에는 절대 위치 요소가 더 이상 존재하지 않습니다.요소의 위치 속성에 절대 값을 지정하면 웹 페이지에 있는 다른 요소의 레이아웃, 예를 들어 경고 및 프롬프트 e.t.c와 같은 팝업 정보와 같은 독립된 UI 기능을 만들 수 있습니다.top, bottom, left와 right 속성이 절대적으로 위치를 정할 때의 행위 방식이 다르다.일반 문서 흐름에서 요소의 상대적인 위치를 기준으로 요소를 배치하는 것이 아니라 요소를 포함하는 각 모서리와 요소의 거리를 지정합니다.

.box-3 {
    background-color: #59b1da;
    color: #fff;
    text-align: center;
    height: 50px;
    width: 120px;
    position: absolute;
    top: 40px;
    left: 50px;
}

이 예에서 절대적으로 포지셔닝된 원소40px는 원소를 포함하는 꼭대기에 있어야 하고 50px는 왼쪽에 있어야 한다는 뜻이다.

Z 지수

절대적인 포지셔닝은 좋지만 원소가 중첩되기 시작할 때 우리는 아직 고려하지 않은 것이 하나 더 있다. 그것이 바로 어떤 원소가 어떤 다른 원소 위에 나타날지 결정하는 것이다.지금까지 우리가 본 예에서 포지셔닝 상하문에는 포지셔닝 요소가 하나밖에 없다. 포지셔닝 요소가 비포지셔닝 요소보다 낫기 때문이다.만약 우리가 하나가 아니라면요?
우리는 원소의 겹치는 순서를 바꿀 수 있습니까?당연하지!z-index 속성은 우리가 이렇게 할 수 있도록 허락한다.'z지수'는 z축을 가리킨다.웹 페이지에도 z축이 있는데 z-index값은 포지셔닝 요소가 이 축의 위치에 영향을 미친다.양의 "z 인덱스"값은 창고에서 위로 이동하고, 음의 값은 창고에서 아래로 이동합니다.기본적으로 포지셔닝 요소의 z-index 값은 모두 auto이고 실제로는 0이다.
z-index 속성을 추가해서 '상대적' 상자를 창고의 더 높은 위치로 끌어올려 봅시다.

.box-2 {
    background-color: #f5ab57;
    color: #000;
    text-align: center;
    height: 50px;
    width: 50px;
    position: relative;
    top: 30px;
    left: 100px;
    z-index: 1;
}

걸출한!,우리는 지금 더욱 높은 차원의 상대적인 틀이 생겼다.우리는'z-index'는 단위가 없는 값만 받아들일 뿐 원소가 z축에 20개의 픽셀로 지정되어서는 안 된다는 것을 주의해야 한다.1과 2를 사용하면 100과 2000과 같은 효과를 낼 수 있다.
다음 회에서 우리는 고정과 점성 포지셔닝에 대해 토론할 것이다.
참고: 예제here를 볼 수 있습니다.