css-10: 포지셔닝

포지셔닝

position 속성은 요소들이 화면에 어떻게 배치될지를 지정합니다.

특이사항으로는, 이 속성은 자식 요소에게 대물림되지 않는다는 점이 있습니다.

static은 기본값으로, 전적으로 페이지의 흐름을 따르며

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

relative 값은 원래 위치를 기준으로 top~right 속성값이 적용되도록 합니다.

요소의 위치는 이동하지만 요소가 차지하는 공백의 위치는 유지됩니다.

* 기본 html

  <div class="container">

    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div class="orange">
      <div class="red"></div>
    </div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>
  </div>

* 기본 css

    .container {
      width: 518px;
      border: 2px solid #ddd;
      padding: 12px 0 0 12px;
      position: relative;
    }
    .container > div {
      display: inline-block;
      width: 160px;
      height: 160px;
      margin: 0 8px 5px 0;
      background-color: lightgray;
    }
    .container > div.orange {
      background-color: gold;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
    }
    .red {
      width: 48px;
      height: 48px;
      background-color: orangered;
    }

---

static

    .container > div.orange {
      background-color: gold;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
      position: relative;
      top: 30px;
      left: 30px;
    }
    .red {
      width: 48px;
      height: 48px;
      background-color: orangered;
      position: relative;
    }

---

---

absoulte(오렌지색div)

absolute 값은 static이 아닌 첫 부모 요소를 기준으로

top~right을 사용하여 위치를 조정할 수 있습니다.

요소는 페이지의 문서 흐름에서 벗어나, 자리를 차지하지 않게 됩니다.

(위의 바깥쪽 div는 포지션이 relative로 되어 있습니다.)

    .container > div.orange {
      background-color: gold;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
      position: absolute;
      top: 30px;
      left: 30px;
    }
    .red {
      width: 48px;
      height: 48px;
      background-color: orangered;
      position: relative;
    }

absoulte(빨강색div)

부모가 static이 아닌 relative나 absolute 인 경우 , 그안의 자식 상자는 부모의 상자에 따라 위치가 변함.

부모가 static일 경우에는 자식은 static인 부모보다 더 상위 부모상자로부터 위치로 변함.

    .container > div.orange {
      background-color: gold;
      box-shadow: 0 0 6px rgba(0, 0, 0, 0.33);
      position: absolute;
    }
    .red {
      width: 48px;
      height: 48px;
      background-color: orangered;
      position: absolute;
      top: 60px;
      left: 60px;
    }

---

---

fixed

fixed는 부모 요소가 아닌 viewport를 기준으로 위치를 지정합니다.

스크롤에 영향을 받지 않으므로, 다이얼로그 팝업처럼 움직이지 않는

요소들에 유용하게 사용될 수 있습니다.

    .red {
      width: 48px;
      height: 48px;
      background-color: orangered;
      position: fixed;
    }

---

---

sticky

sticky는 요소가 스크롤로 이동할 수 있는 공간을 top~right 속성으로

제한할 수 있습니다. 부모요소 에 막힘.

---

---

z-index

z-index 속성은 static이 아닌 요소들간

위아래 배치 순서를 지정합니다.

auto는 0과 같으며, 같은 값의 요소들 중에는

나중에 배치된 것이나 값이 큰 순서대로 위로 올라오게 됩니다.

( 현재 이 3개 div는 모두 포지션이 absolute입니다. )

* 기본 html

      <div class="red"></div>
      <div class="blue"></div>
      <div class="yellow">

* 기본 css

    div {
      position: absolute;
      width: 160px;
      height: 160px;
      border: 2px solid rgba(255, 255, 255, 0.33);
    }
    .red {
      background-color: tomato;
    }
    .blue {
      background-color: dodgerblue;
      top: 96px;
      left: 96px;
    }
    .yellow {
      background-color: yellow;
      border: 2px solid gold;
      width: 160px;
      height: 140px;
      padding: 24px;
      top: 160px;
      left: 160px;
    }

* 노란색 → 파란색 → 빨간색 순으로 올라오기

div {
      position: absolute;
      width: 160px;
      height: 160px;
      border: 2px solid rgba(255, 255, 255, 0.33);
    }
.red {
  background-color: tomato;
  z-index: 3;
}
.blue {
  background-color: dodgerblue;
  top: 96px;
  left: 96px;
  z-index: 2;
}
.yellow {
  background-color: yellow;
  border: 2px solid gold;
  width: 160px;
  height: 140px;
  padding: 24px;
  top: 160px;
  left: 160px;
  z-index: 1;
}

___

---

실습

  <div>이 요소를 화면 가운데에 배치해보세요!</div>
  </div>

body { margin: 0; }
div {
  width: 300px;
  height: 80px;
  line-height: 80px;
  text-align: center;
  background-color: skyblue;
  position: fixed;
  top: calc(50% - 40px);
  left: calc(50% - 150px);
}