CSS에 정말 능숙해지려면 CSS 위치 속성을 이해하는 것이 중요합니다. 그러나 초보자에게는 더 실망스러운 경험 중 하나 일 수 있습니다.

개발자 포트폴리오를 구축 할 때 CSS 위치 속성을 제대로 이해하지 못했으며 만족스러운 결과를 얻을 때까지 여러 위치 조합을 무작위로 시도했습니다. 그러나 대부분의 경우 그것은 쓰레기였고 내가 빠뜨린 작은 머리카락을 잡아 당겼습니다.

이 기사에서는 position 속성으로 무엇을 하고 있는지 알지 못하는 고통을 덜어 드리려고 합니다. CSS 위치 속성의 각 값이 어떻게 작동하는지 배우게 되므로 CSS를 정말 잘 할 수 있습니다.

위치 속성 및 관련 값을 이해하려면 먼저 요소가 웹 페이지에 배치되는 방식을 이해해야 합니다.

흐름 레이아웃 

페이지에 요소가 배치되는 방식을 일반 흐름 또는 흐름 레이아웃이라고 합니다. 기본적으로 요소가 페이지에 표시되는 방식입니다. 기본적으로 흐름은 함께 작동하는 페이지의 모든 요소 집합이며 각 요소는 다른 모든 요소에 대해 알고 있습니다.

이제 CSS는 각 HTML 요소를 자체 상자로 취급합니다. 상자 모델이라고 하는 것을 들어 보셨을 것입니다. 블록 수준 항목 (제목, 단락 또는 div와 같은 것)은 기본적으로 새 줄에서 시작하는 반면 인라인 항목 (이미지 또는 범위)은 같은 줄의 주변 콘텐츠 내에 있습니다. 이러한 방식으로 요소의 기본 레이아웃을 문서의 일반 흐름이라고 하지만 CSS는 위치 속성에서 일반 흐름을 재정의 하는 강력한 도구를 제공합니다.

position 속성이 무엇을 하는지 살펴 보겠습니다.

Position Property 

CSS 위치 속성은 문서에서 요소가 배치되는 방식을 설정합니다. 이를 사용하여 position 속성에 제공 한 값을 기반으로 개별 요소를 배치 할 방법을 결정할 수 있습니다.

position 속성은 5 개의 값을 사용합니다.

1. Static
2. Relative
3. Absolute
4. Fixed
5. Sticky

이 5 가지 값을 모두 다룰 예정이지만, 그 전에 배치 속성과 이들이 배치에 미치는 영향을 이해해야 합니다.

배치 속성 

그 자체로는 위치 속성이 많은 일을 하지 않습니다. 요소가 배치되어야 하는 위치를 문서에 정확히 알리기 위해 배치 속성 (공식 이름이 아닌 이름)을 사용해야 합니다. 이를 수행하는 4 가지 주요 속성이 있습니다.

1. Top
2. Left
3. Right
4. Bottom

이러한 각 속성은 요소의 위치를 ​​기본값에서 조정해야 하는 정도와 조정해야 하는 방향을 정의합니다. 아래의 위치 값과 예제를 살펴보면 이것이 어떻게 작동하는지 더 명확해질 것입니다.

위치 속성 값 

Static Positioning 

정적 위치는 위치 속성의 기본값입니다. 즉, 페이지의 요소가 정상적인 흐름에서 예상되는 순서대로 나타납니다. 배치 속성 top, left, bottom 및 right는 position : static이 있는 요소에 영향을 주지 않습니다.

기본값인 경우에도 위치 속성을 정적으로 설정하는 것이 유용 할 수 있습니다. 이를 수행하려는 경우의 예는 다른 곳에서 설정 한 위치 값을 재정의 하려는 경우입니다.

정적 위치가 이 속성이 있는 요소에 영향을 주지 않는 예를 살펴 보겠습니다.

<div class="parent-box">
  <div class="box-original">
    <div class="box-1"> </div>
  </div>

  <div class="box-original">
    <div class="box-2"> </div>
  </div>

  <div class="box-original">
    <div class="box-3"> </div>
  </div>
</div>

위의 예에서는 box-original 클래스가 있는 상위 컨테이너에 각각 3 개의 div가 있습니다.

box-2 클래스를 사용하여 div에 position : static을 추가하고 상자에 상단 및 왼쪽에 대한 값을 지정합니다.

.box-2 {
  position: static;
  top: 10px;
  left: 10px;
  border: 1px solid black;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  display: inline-block;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

아래는 우리가 변경 한 결과입니다.

https://codepen.io/pin0s/pen/xxgMXdE

위치 속성과 배치 값을 사용했지만 요소에 영향을 미치지 않는 것을 보셨나요? 이제 정적 값이 기본값이고 배치 값이 position : static 요소에 영향을 주지 않음을 알았습니다.

문서 흐름에서 요소의 위치에 영향을 미치는 첫 번째 값을 살펴 보겠습니다.

Relative Positioning 

상대 위치는 요소가 일반 흐름에서 원래 위치를 기준으로 배치됨을 의미합니다. 위치를 갖도록 요소를 설정하면 : 상대는 아무 일도 일어나지 않습니다. 배치 속성을 사용하여 요소가 원래 위치를 기준으로 배치되는 방식을 변경해야 합니다.

기본적으로 HTML 요소를 position : relative로 설정하면 레이아웃의 흐름에 그대로 유지됩니다. 그러나 배치 속성을 사용하여 요소를 이동할 수 있습니다. 상대적 위치에 대한 이해를 확고히 하기 위한 예를 살펴 보겠습니다.

position : static을 position : relative로 바꾸겠습니다.

.box-2 {
  position: relative;
  top: 10px;
  left: 10px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

변경 결과는 다음과 같습니다.

https://codepen.io/pin0s/pen/NWdoaVQ

보라색 정사각형 요소가 처음에 회색 정사각형의 위치를 ​​기준으로 배치되었음을 알 수 있습니다. 위의 예에서는 원래 정상 흐름에 배치되도록 의도 된 위치에서 위쪽에서 10px, 왼쪽에서 10px입니다. 그러나 요소는 문서의 정상적인 흐름을 유지하며 오프셋은 원래 위치를 기준으로 적용됩니다. 다른 위치 값으로 이동할 때 이것을 기억하십시오.

Absolute Positioning 

절대 위치 요소는 일반 문서 흐름에서 제거되고 요소가 원래 차지했던 공간은 더 이상 해당 요소를 위해 예약되지 않습니다. 나는 그것이 '절대 거기에 없다'고 말하면서 그것을 기억하는 것을 좋아합니다.

요소에 위치가 지정되면 절대 다른 모든 요소는 해당 요소가 더 이상 문서에 없는 것처럼 작동합니다. 따라서 페이지 레이아웃에서 해당 요소에 대해 예약 된 공간이 없습니다. 그러면 HTML 요소를 이동하는 데 매우 강력한 도구가 될 수 있습니다.

내가 배웠을 때 저를 괴롭혔던 중요한 점은 position : absolute 요소가 가장 가까운 위치 조상에 상대적으로 위치한다는 것입니다. 이것이 의미하는 바는 절대 위치 지정이 작동하려면 상위 요소에 static 기본값이 아닌 위치 속성 값이 있어야 한다는 것입니다.

가장 가까운 상위 요소에 위치 속성이 없는 경우 절대 위치가 있는 요소는 위치 속성 값이 있는 다음 상위 요소에 상대적으로 배치되므로 이 점에 유의해야 합니다. 위치 속성 값이 있는 요소가 없는 경우 요소는 html 또는 뷰포트 요소를 기준으로 배치됩니다. 이 사실을 모르기 때문에 문서에서 요소를 배치하려고 할 때 많은 고통을 초래할 수 있습니다.

배치 속성을 사용하여 다른 CSS 위치 속성과 마찬가지로 절대 위치 요소를 이동할 수 있습니다. top, left, bottom 및 right 속성을 사용하여 기본 위치가 아닌 위치 속성이 있는 계층 구조에서 첫 번째 부모 요소 인 static을 기준으로 요소가 배치 될 위치를 결정합니다.

우리의 예로 돌아 갑시다. 이제 두 번째 상자 요소의 위치 속성을 position : absolute로 변경합니다. 변경 사항과 결과를 보기 전에 이전 펜에서 parent-box 요소의 위치가 무엇인지 확인하십시오.

.box-2 {
  position: absolute;
  top: 30px;
  left: 150px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

변경 결과는 아래와 같습니다.

https://codepen.io/pin0s/pen/dyNaZye

여기서 문서에 요소에 대한 공간이 생성되지 않았음을 알 수 있습니다. 실제로 공간이 축소되고 다른 요소가 페이지에 없는 것처럼 작동합니다. 이는 요소가 이제 parent-box 요소를 기준으로 배치되기 때문입니다.

Fixed positioning 

고정 위치 지정은 일반 문서 흐름에서 제거되고 요소가 원래 차지했던 공간이 더 이상 해당 요소에 대해 예약되지 않는다는 점에서 절대 위치 지정처럼 작동합니다.

고정 위치 요소는 뷰포트를 기준으로 배치됩니다. 이것이 의미하는 바는 페이지를 아래로 스크롤 하면 요소가 페이지의 원래 위치에 남아 있다는 것입니다. 사용자가 페이지에서 스크롤 하는 위치에 관계없이 항상 페이지 상단에 표시되는 탐색 모음에 자주 사용됩니다.

box-2의 위치를 ​​position : absolute에서 position : fixed로 변경하겠습니다. 또한 top 속성의 값을 0으로 변경하고 왼쪽 속성 값을 제거 할 것입니다. 스크롤 할 때 효과를 보여주는 몇 가지 상자도 추가했습니다.

.box-2 {
  position: fixed;
  top: 0px;
  border: 1px solid red;
  background-color: mediumpurple;
  width: 100px;
  height: 100px;
  text-align: center;
  align-self: center;
  margin-left: -1px;
  margin-top: -1px;
}

변경 결과는 아래와 같습니다.

https://codepen.io/pin0s/pen/mdRvqOo

예에서 볼 수 있듯이 보라색 상자 요소는 이제 이전에 구축 한 탐색 막대와 마찬가지로 페이지 상단에 고정됩니다. 이는 position 속성을 fixed로 설정하고 페이지 상단에서 0으로 설정했기 때문입니다.

고정 된 값으로 CSS 위치 속성을 사용하는 경우 사용자가 페이지에 있는 전체 시간을 지정하는 표시 영역 공간을 차지한다는 점에 유의해야 합니다. 이는 특히 화면 공간이 제한된 모바일 장치에서 사용자 경험에 영향을 미칠 수 있습니다. 따라서 미디어 쿼리를 사용하여 모든 장치에서 사용하는 방법에 대해 생각하고 있는지 확인하십시오.

Sticky Positioning 

고정 위치 값은 문서의 정상적인 흐름에 따라 배치되지만 위치 상대 및 위치 고정이 혼합 된 것이기도 합니다. 이것이 의미하는 바는 페이지가 설정된 스크롤 포인트에 도달 할 때까지 상대적으로 배치 된 요소로 작동하고 고정 된 위치 요소로 작동한다는 것입니다.

요소가 페이지의 위치에 도달하면 고정 위치 요소로 변경되는 것을 확인하기 위해 아래의 새 예를 살펴 보겠습니다. dt 태그에 위치 값 sticky를 지정하고 속성 top에 3px 값을 지정하면 페이지 상단에서 3px가 됩니다.

dt {
  background: #007FFF;
  border-bottom: 1px solid yellow;
  border-top: 1px solid yellow;
  color: yellow;
  margin: 0;
  padding: 2px 0 0 12px;
  position: sticky;
  top: -1px;
}

https://codepen.io/pin0s/pen/GRrzyKp

위의 예에서 다음 dt 태그 지점에 도달 할 때까지 dt 태그 (파란색 선)가 고정되어 있음을 알 수 있습니다. 그 지점에 도달하면 다음 dd 태그가 고정 요소가 됩니다. 따라서 dt 요소는 페이지의 정상적인 흐름에 배치되지만 스크롤 할 때 해당 위치에 도달하면 위치가 고정됩니다. 다음 dt 태그가 고정 된 위치를 차지할 때까지 스크롤 할 때 해당 위치에 고정되어 유지됩니다.

고정 위치 속성은 이 문서를 작성할 당시 모든 브라우저 (성가신 IE 사용자)에서 아직 보편적으로 지원되지 않으므로 주의해야 합니다. caniuse.com을 확인하여 지원 여부를 언제든지 확인할 수 있습니다.

Z- 색인은 어디에 적합합니까? 

Z- 색인은 배치 된 요소의 Z 순서를 설정할 수 있는 CSS 속성입니다. 즉, static 이외의 위치 속성 값으로 설정 한 모든 요소는 Z- 색인 평면을 따라 배치 될 수 있습니다.

기본적으로 Z- 색인을 사용하면 이러한 요소가 정렬되는 방식과 서로 겹치는 방식을 제어 할 수 있습니다. 기본적으로 어떤 요소가 앞쪽에 나타나고 어떤 요소가 뒤쪽에 나타나야 하는지를 결정합니다.

더 높은 값의 Z- 색인 속성을 가진 요소는 더 낮은 값의 Z- 색인 속성을 가진 요소 앞에 표시됩니다.

아래의 예를 살펴보면 Z- 색인을 사용하는 경우 순서가 중요하지 않다는 것을 보여주기 위해 HTML 순서를 보여 드리겠습니다.

<div class="parent-box">

    <div class="box box-1">z-index:4</div>
    <div class="box box-2">z-index:1</div>
    <div class="box box-3">z-index:2</div>
    <div class="box box-4">z-index:5</div>
    <div class="box box-5">z-index:3</div>

</div>

그런 다음 각 상자 클래스에 고정 위치를 지정하여 이제 각 상자 요소의 Z- 인덱스를 변경할 수 있습니다. 그 결과는 아래와 같습니다.

https://codepen.io/pin0s/pen/MWJLrKG

결과에서 알 수 있듯이 높은 Z- 색인 요소가 앞쪽에 있고 아래쪽 요소가 뒤쪽에 있습니다.

결론 

우리가 배운 것을 요약합니다. CSS 위치 속성은 페이지에 요소를 배치하는 방법을 결정하여 문서의 정상적인 흐름을 변경할 수 있는 강력한 도구입니다.

작업 할 5 개의 위치 속성이 있습니다.

• Static
• Relative
• Absolute
• Fixed
• Sticky

top, left, bottom 및 right 속성을 사용하고 해당 지점에서 얼마나 멀리 떨어져 있어야 하는지 지정하여 요소의 위치를 ​​설정합니다.

기본 정적이 아닌 위치 속성 값을 지정한 경우 Z- 색인에서 요소의 위치를 ​​설정할 수도 있습니다. 값이 높을수록 앞쪽에 표시되고 낮은 값이 뒤쪽에 표시됩니다.

CSS 위치 속성을 더 잘 활용하는 가장 좋은 방법은 함께 노는 것입니다. 여기에서 사용한 펜에 서로 다른 값을 제공하거나 부모 요소를 변경하여 각 속성을 사용해보십시오.

https://dev.to/peterlunch/a-painless-guide-to-understanding-css-positioning-2nbh