CSS Position (위치)

position

요소의 위치를 지정하는 기준을 정하는 속성 (top, bottom, left, right , z-index 와 함께 쓰인다)

static* : 기본값. 아무런 영향을 주지 않는다. display 속성값이 block 으로 변경된다.
relative : 요소 자신을 기준으로 한다.
absolute : 위치상의 부모 요소를 기준으로 하며, 만약 지정 요소가 없다면 그 상위로 계속 올라간다. 참고로 position: static; 은 absolute 의 위치상 부모가 될 수 없다.
fixed : 뷰포트를 기준으로 한다. display 속성값이 block 으로 변경된다.
sticky : 가장 가까운 조상, 큰테이닝 블록을 기준으로 한다.
top , bottom , left , right : auto* , 단위
z-index : 요소의 쌓임 정도를 지정 auto* , 숫자 , -1 (음수도 가능하나 -1 이 가장 많이 쓰인다)

.box {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}

<aside> 💡 Stack order (요소 쌓임 순서)

요소에 position 속성값이 있는 경우 위에 쌓인다.
position이 모두 존재한다면, z-index 값이 클수록 위에 쌓인다.
position이 모두 존재하고 z-index 값이 같다면, HTML 내에서 마지막(최근)코드 일수록 위에 쌓인다.

</aside>

위치 지정

1. 자식태그 부모 만들기

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>1</div>
    <div id="center">2</div>
    <div>3</div>
  </body>
</html>

body {
  display: flex;
}

div {
  width: 200px;
  height: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
}

#center {
  background-color: seagreen;
}