[CSS] 포지션

안녕하세요, Einere입니다.

(ADblock을 꺼주시면 감사하겠습니다.)

---

position

position은 요소가 문서 내에서 어떻게 배치될 지 결정하는 속성입니다. 사용 가능한 값으로는 static, relative, absolute, fixed, sticky가 있습니다.

요소의 상대적인 위치를 결정하는 속성으로는 top, bottom, left, right가 있습니다.

top과 bottom에 대해서, top이 우선 적용됩니다.

left와 right에 대해서, 글을 읽는 방향(한국의 경우 left)이 우선 적용됩니다.

 

배치 유형

• 위치 지정 요소 : position의 계산된 값이 static이 아닌 요소
• 상대 위치 지정 요소 : position의 계산된 값이 relative인 요소
• 절대 위치 지정 요소 : position의 계산된 값이 absolute 혹은 fixed인 요소
• 끈끈한 위치 지정 요소 : position의 계산된 값이 sticky인 요소

 

static

static은 기본 값입니다.

문서의 일반적인 흐름에 따라 배치됩니다.

top, bottom, left, right, z-index의 속성의 영향을 받지 않습니다.

 

relative

문서의 일반적인 흐름에 따라 배치됩니다. (즉, 요소에 대한 공간이 생성됩니다.)

자신의 공간을 기준으로, 상대적인 위치로 배치됩니다.

z-index가 auto가 아닌 경우, 새로운 stacking context를 생성합니다.

 

absolute

문서의 일반적인 흐름에서 제거됩니다. (즉, 요소에 대한 공간이 생성되지 않습니다.)

가장 가까운 위치 지정 요소인 조상을 기준으로, 상대적인 위치로 배치됩니다. (만약 조상 중 위치 지정 요소가 없다면, 초기 containing block을 기준으로 합니다.)

z-index가 auto가 아닌 경우, 새로운 stacking context를 생성합니다.

절대적으로 배치된 box는 margin을 가질 수 있으며, 다른 margin에 의해 망가지지 않습니다. (아마 겹치거나 영향을 받지 않는다는 뜻 같습니다.)

 

fixed

문서의 일반적인 흐름에서 제거됩니다. (즉, 요소에 대한 공간이 생성되지 않습니다.)

스크린의 viewport에 대한 상대적 위치로 배치됩니다. (즉, 스크롤에 상관없이 고정된 위치에 배치됩니다.)

항상 새로운 stacking context를 생성합니다.

절대적 배치 박스 요소는 margin을 가질 수 있으며, 다른 margin에 의해 망가지지 않습니다. (아마 겹치거나 영향을 받지 않는다는 뜻 같습니다.)

 

sticky

<dl>
    <div>
        <dt>A</dt>
        <dd>Andrew W.K.</dd>
        <dd>Apparat</dd>
        <dd>Arcade Fire</dd>
        <dd>At The Drive-In</dd>
        <dd>Aziz Ansari</dd>
    </div>
    <div>
        <dt>C</dt>
        <dd>Chromeo</dd>
        <dd>Common</dd>
        <dd>Converge</dd>
        <dd>Crystal Castles</dd>
        <dd>Cursive</dd>
    </div>
    <div>
        <dt>E</dt>
        <dd>Explosions In The Sky</dd>
    </div>
    <div>
        <dt>T</dt>
        <dd>Ted Leo &amp; The Pharmacists</dd>
        <dd>T-Pain</dd>
        <dd>Thrice</dd>
        <dd>TV On The Radio</dd>
        <dd>Two Gallants</dd>
    </div>
</dl>

* {
  box-sizing: border-box;
}

dl {
  height: 200px;
  overflow: scroll;
  
}

dl > div {
  background: #fff;
  border: 1px solid red;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font: bold 18px/21px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

dd {
  font: bold 20px/45px Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}

클릭해서 보셔야 제대로 보입니다.

이 값이 설정된 요소는 상대적 배치 요소로 동작하다가 containing block이 flow root 혹은 스크롤중인 컨테이너의 임계값을 넘으면, 컨테이닝 블록의 반대편 모서리를 만날 때 까지 부착됩니다.

문서의 일반적인 흐름에 따라 배치됩니다. (즉, 요소에 대한 공간이 생성됩니다.)

top, right, bottom, left값을 기준으로 flow root 및 containing block에 대한 상대적 위치에 배치됩니다.

항상 새로운 stacking context를 생성합니다.

브라우저에 따라 overflow: hidden 혹은 overflow: auto가 정상적으로 작동하지 않을 수 있습니다.

 

 

참고

https://developer.mozilla.org/ko/docs/Web/CSS/position

position