position 속성 정리

종류	absolute, fixed	relative	static
너비	최대한 줄어든다.	그대로 유지	그대로 유지
본질	유령화, 유령의 집화	유령의 집화	사람화
겹침 허용	겹치는 게 가능	겹치는 거 불가능	겹치는 거 불가능
이동	top, left, right, bottom 으로 이동, 기준이 부모 유령	top, left, right, bottom 으로 이동, 기준이 현재 위치	-

• top, left, right, bottom에 %사용 시 소수점 4자리까지 명시해야 거의 정확하다.
• top: 50%;: 위를 기준으로 50% 밀어 낸다.(위에서 50%만큼 떨어진다.)
• position: absolute;인 태그들의 부모에 position: relative; 해주면 부모가 absoulte들의 활동 공간이 됨(기준이 된다.)
• position: absolute;인 태그들의 부모에 position: abolute; 해주면 부모가 abolulte들의 활동 공간이 되고 + 자신도 absolute가 된다.
• absoulte와 fixed의 차이는 fixed는 스크롤을 내려도 계속 고정적으로 따라 움직인다.

z-index

• position을 준 태그에 z-index를 주면 제일 위로 올라온다.
• z-index의 값은 상대적이다.
• z-index: 9999; vs z-index: 1; -> z-index값이 큰게 제일 위에 올라온다.(화면에 가까워진다.)

transform

• transform: 변형(주변 엘리먼트에 영향을 주지 않는)
• transform: translateX(-50%) translateY(-50%);
  • translateX(-50%) : 자신의 너비의 반만큼 왼쪽으로 이동
  • translateY(-50%) : 자신의 높이의 반만큼 위쪽으로 이동