CSS Position

position

• 요소의 위치를 정의할 때 사용
• offset(top, bottom, left, right)과 함께 사용하여 위치를 지정

e.g.

.class {
    position: absolute;
    top: 50%;
    right: auto;
    bottom: -10px;
    left: 10px;
}

1. static (기본)

• 기본적인 요소의 배치 순서로 배치되며 부모 요소 내에 자식 요소로서 존재할 때는 부모 요소의 위치를 기준으로 배치된다.

📝코드

.box {
      color: white;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
}

.parent {
      border: 1px dashed #aaa;
      padding: 10px;
}
.child {
      background-color: red;
}
.sibling {
      background-color: orange;
}

<div class='parent'>
    <div class="box sibling">sibling</div>
    <div class="box child">child</div>
    <div class="box sibling">sibling</div>
</div>

💻결과

2. relative (상대위치)

• static인 위치를 기준으로 offset (top, bottom, left, right)에 따라 배치된다.

📝코드

.box {
      color: white;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
}

.parent {
      border: 1px dashed #aaa;
      padding: 10px;
}
.sibling {
      background-color: orange;
}
.child {
      position: relative;  /*추가*/
      background-color: red;
      left: 100px;         /*추가*/
}

<div class='parent'>
    <div class="box sibling">sibling</div>
    <div class="box child">child</div>
    <div class="box sibling">sibling</div>
</div>

💻결과

3. absolute (절대위치)

• 부모 요소의 위치를 기준으로 offset 에 따라 배치된다.
  • 부모가 position 값(static 제외)을 가지면 offset 값의 시작점이 된다.
  • 부모의 position 값이 static 인 경우 조상의 position 값이 static이
    아닐 때까지 거슬러 올라가 기준으로 삼는다.

📝코드

.box {
      color: white;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
}

.parent {
      border: 1px dashed #aaa;
      padding: 10px;
      position: relative; /*추가*/
}
.sibling {
      background-color: orange;
}
.child {
      position: absolute; /*추가 */
      background-color: red;
      top: 0px; /*추가 */
      left: 100px; /*추가 */
}

<div class='parent'>
    <div class="box sibling">sibling</div>
    <div class="box child">child</div>
    <div class="box sibling">sibling</div>
</div>

💻결과

• 부모의 padding 영역부터 시작한다.
• left로 100px을 줘도 child가 sibling이랑 겹치는 이유는 parent에 padding이 있기 때문이다. ( +10을 추가시켜주면 정상 )

4. fixed (고정위치)

• 부모 요소와 관계없이 브라우저의 viewport를 기준으로 offset 에 따라 배치
• 스크롤이 되더라도 화면에서 사라지지 않고 항상 같은 곳에 위치하려고 할 때 유용하다.

📝코드

.box {
      color: white;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
}

.parent {
      border: 1px dashed #aaa;
      padding: 10px;
      position: relative; /*추가*/
}
.sibling {
      background-color: orange;
}
.child {
      position: fixed;
      background-color: red;
      top: 0px; /*추가 */
      left: 0px; /*추가 */
}

<div class='parent'>
    <div class="box sibling">sibling</div>
    <div class="box child">child</div>
    <div class="box sibling">sibling</div>
</div>

💻결과

---

z-index

• 박스가 겹치는 순서를 지정
• position 값이 static이 아닌 경우 지정가능
• 값이 클 수록 가장 위쪽
  

📝코드

.box {
      color: white;
      border-radius: 6px;
      width: 100px;
      height: 100px;
      text-align: center;
      line-height: 100px;
      opacity: 0.7;
}

.parent {
      position: relative;
}
.child {
      position: absolute;
}

.child:nth-of-type(1){
      background-color: red;
      top: 0px;
      left: 0px; 
}
.child:nth-of-type(2) {
      background-color: blueviolet;
      top: 50px;
      left: 50px;
}
.child:nth-of-type(3) {
      background-color: orange;
      top: 100px; 
      left: 100px; 
}

<div class='parent'>
    <div class="box child">child</div>
    <div class="box child">child</div>
    <div class="box child">child</div>
</div>

💻결과

• z-index 없는 경우
  
• z-index 있는 경우

.child:nth-of-type(2) {
      z-index: 100;
}
/* child 클래스 두번째 요소에 z-index 추가 */

---

Reference

• https://poiemaweb.com/