position 속성 [relative, absolute, fixed]

나 이거 왜 이해 모태? ,,, 나 외 욿 어?

• CSS의 position 프로퍼티를 사용하면, html 코드와 상관없이 그리고 싶은 어느 위치에나 요소를 그릴 수 있음

1. relative

• relative = 부모
• position: relative; 는 별도의 프로퍼티를 지정하지 않는 이상 기본값인 static과 동일하게 동작
• 상대 위치가 지정된 엘리먼트에 top, right, bottom, left를 지정하면 지정한 값에 맞게 위치가 조정
  *top, right, bottom, left는 position 이라는 프로퍼티가 있을 때만 적용되는 프로퍼티
  *마이너스 값을 주면 아래로 떨어지지 않고, 위로 올라감

2. absolute

• absolute = 자식
• position: absolute; 는 절대적인 위치에 둘 수 있음. 특정 부모에 대해 절대적으로 움직이게 됨
• 부모 중 position이 relative, fixed, absolute 하나라도 있으면, 그 부모에 대해 절대적으로 움직이게 됨
• absolute를 쓸 경우, 기준이 될 부모에게 position: relative;를 부여하면 됨
• absolute는 값을 넣으면 지표에서 풍선이 떠오르듯 붕 떠버림.
  그래서 그 아래에 있는 태그들이 그곳에 태그가 있는 줄 모르고 윗쪽으로 밀려 올라와 버릴 수 있으니,
  이를 꼭 명심할 것!
• position 가운데 정렬 공식
  left: 50%;
  top: 50%;
  margin-left: -(가로/2);
  margin-top: -(높이/2);

3. fixed

• position: fixed; 는 페이지가 스크롤 되더라도 늘 같은 곳에 위치
• relative와 마찬가지로 top, right, bottom, left 프로퍼티 사용
• position이 absolute 혹은 fixed가 되면 주변의 요소와 상관없이 위치하게 됨으로, 다른 요소들과 겹치게 될 가능성이 있음