css 포지션속성

Position 속성 : relative & absolute

html의 요소의 위치값을 주려면 아래와 같이 position 속성이 필요하다.

.parent {
  position: relative;
}
.child {
  position: absolute;
  top : 0;
  left: 0;
  right: 0;
  bottom: 0;
}

자식요소의 위치를 부모요소 기준으로 위치를 변경하고 싶을때,
중요한건 부모요소에 relative를 주고 자식요소에 relative를 줘야한다는 것.

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

<style>
  .parent{
     width: 500px;
     height: 500px;
     border: 1px solid #000;
   }
  .child{  
     background-color: dodgerblue;
     width: 100px;
     height: 100px;
   }

예시로 이와 같은 html을 하나 생성했다.

여기서 저 파랑네모를 우측하단으로 붙이고 싶다면?

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

<style>
  .parent{
     position: relative;
     width: 500px;
     height: 500px;
     border: 1px solid #000;
   }
  .child{ 
     position: absolute;
     background-color: dodgerblue;
     width: 100px;
     height: 100px;
     bottom: 0;
     right: 0;
   }

부모요소에 relative, 자식요소에 absolute를 주고,
bottom과 right에 각각 0값을 주면
자식요소가 부모요소의 범위 안에서 아래와 오른쪽 끝으로 붙게된다.

조금 응용해서, 저 파랑 네모를 부모요소 박스 내 '정중앙'에 위치시키고 싶다면?

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

<style>
  .parent{
     position: relative;
     width: 500px;
     height: 500px;
     border: 1px solid #000;
   }
  .child{ 
     position: absolute;
     background-color: dodgerblue;
     width: 100px;
     height: 100px;
     top: 50%;
     left: 50%;
     transform: translate(-50%,-50%)
   }

여기서 top, left는 알겠는데..transform속성은 갑자기 뭐지?

transform 속성

얘는 변형을 시키는 속성이고 그 중 translate는 (x,y) 값대로 이동시키는 속성이다.

알겠는데, 왜 transform이 추가로 필요하냐..?
위에서 .parent의 좌표는 좌측상단 꼭지점을 기준으로 한다.

그래서 단순히 top, left를 50%씩 줬을때는 자식요소가 저 주황색 위치에 가게된다.

그래서 여기서 자식요소 크기의 절반만큼 위로 -x축으로 50% -y축으로 50% 이동(주황화살표)해야 정중앙에 배치된다.

같은 원리로 저 자식요소를 부모요소 밖으로 보낼수도 있다.