📚부모요소 vs 자식요소
하나만 기억하자! relative는 부모요소, abolute는 자식 요소.
부모에게 position: relative, 자식에게 position: absolute 값을 주고 난 후
자식 좌표값 top, right, bottom, left를 이용하여 원하는 위치로 이동시킨다. (일부러 연습하려고 괄호에 들어가는 값 순서대로 나열해봤음ㅎㅎ)
부모(파란 박스)에게 position: relative가 없으면 자식(빨간 박스)에게 position: absolute 를 넣었을 때 자식의 부모는 뷰포트로 인식한다.
📝메모
파란 박스 왼쪽과 오른쪽에 마진이 있길래
div기본 마진인 줄 알았는데,body가 갖고 있는 기본 마진이였다.
📚자동으로 수평/수직 중앙 정렬시키기
부모와 자식에게 position 값을 잘 주었다면 자식의 위치 기본값은 top: 0, left: 0로 되어있을 것이다.
이걸 공식처럼 외워두도록 하자!
박스 기준점이 왼쪽 상단(0,0)에 위치해 있기 때문에(일러스트랑은 다르구만) 아무 생각 없이 top:50%,left:50%을 줬다간 묘하게 오른쪽 아래로 치우친 느낌을 받을 수 있다. 이동 기준점을 가운데로 옮겨주는 속성 transform: translate();을 사용해야 함.
transform : translate(-50%, -50%); (기준점을 50% 아래로, 오른쪽으로 이동)
📝메모
아 그리고 자식 요소에게 부여하는
position: absolute에도 부유하는 성질이 있어서 적용 시 부모의 높이값이 자식에게 자동으로 맞춰지지 않는다고 한다.
📚부모요소의 밖에 위치시키기
생각보다 별거 없다. 그냥 position 값을 잘 준 다음에 top, right, bottom, left 값을 100%이상 혹은 부모 요소의 크기보다 크게 주면 된다.
