No 2. position

position은 css 배울 때 아리송해서 눈물났었던 추억을 떠올리며 다시 정리한다..

---

position(포지션)

CSS position 속성은 문서 상에 요소를 배치하는 방법을 지정합니다. top (en-US), right (en-US), bottom (en-US), left (en-US) 속성이 요소를 배치할 최종 위치를 결정합니다.

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

💡 한마디로 요소를 어디에 배치할건지 물어보는 속성이다.

static

포지션을 별도로 지정해주지 않으면 static값이다.

• mdn에서 찾아보니 (top, right, bottom, left, z-index가 영향을 주지않는다고한다.)

relative

처음 배울때 헷갈렸던 relative! relative는 absolute의 집이라고 생각하면된다! 그래서 relative를 기준으로 absolute를 움직인다고 생각하면된다.

absolute

relative를 집이라고 생각하면 absolute는 사람이라고 생각하자! 집에서 사람은 안방을 갔다 화장실을 갔다 자유롭게 생활하지않는가? 그것과 같은 느낌이라고 생각하면된다 :) absolute는 같은 공간에 absolute를 여러개 주면 css 성질상 맨 마지막의 absolute가 위로 나타나게된다.

💡 겹친상태에서 1번을 보여야한다면 z-index를 주면 뿅! 하고 나타난다.

<!--html-->
<!--기본구조 생략-->
   <div class="absolute">absolute1</div>
   <div class="absolute">absolute2</div>
   <div class="absolute">absolute3</div>
   <div class="absolute">absolute4</div>

/*css*/
.absolute{
  width:100px;
  height:100px;
  background:black;
  color:white;
  position: absolute;
}

sticky

sticky는 스티커같이 끈끈한(?) 그런 포지션이다. fixed와 비슷해보이지만 내가 원하는 위치에만 착! 붙어야할때 그때 사용하면된다.(ie에서는 지원을 안하니 참고하자..^^.....)

💡 sticky는 부모가 필요하며, 위치값도 필요하다!

<!--html-->
<!--기본구조 생략-->
    <div class="sticky_parent">
      <div class="sticky"></div>
    </div>

    <div class="whatever"></div>

/*css*/
.sticky_parent{
  width:300px;
  height: 500px;
  background:black;
}

.sticky{
  width:50px; 
  height:40px;
  position:sticky;
  top:10px; 
  left:10px; 
  background:red;
}

.whatever{
  width:300px;
  height: 600px;
  background:pink;
}

아래 보이는 그림은 black만 붙어있는것을 표현하고싶어서 pink색의 whatever를 옆으로 편집한것이니 참고하자

fixed

말 그대로 정말 어디 한군데에 착! 고정해 있는 포지션이다. 주로 네비바에 사용을 많이한다!

💡 한 section만 보이고 싶다면 sticky를 쓰고, 처음부터 끝까지 보이고싶다면 fixed를 쓰면된다!

(갓플도 fixed를 썼다.🍎 https://www.apple.com/kr/)

최종적으로 모아본 position

💡 sticky는 부모가 없다면 바로 위의 구조(조상)에게 달라붙어서 absolute가 보이지않는것!

<!--html-->

<!--기본적인 구조는 생략했다!-->
   <div class="one">static</div>
   <div class="two">relative</div>
   <div class="three">absolute</div>
   <div class="four">sticky</div>
   <div class="five">fixed</div>

/*css*/
body{
  width:300px;
  height: 1000px;
}

.one, .two, .three, .four, .five{
  width:100px;
  height: 100px;
  color:white;
}

.one {
  position: static;
  background:red;
}

.two {
  position: relative;
  background:black;
}

.three {
  position: absolute;
  background:pink;
}

.four{
  position: sticky;
  background:orange;
}

.five {
  position: fixed;
  background:purple;
}

---