CSS : Position에 대해서

내가 해결하고 싶은 문제는 이미지 위에 텍스트를 띄우고 싶어서 찾았던 속성이다. 

 

 

---

Position이란?

html문서에서 대상이 배치되는 위치를 지정할 수 있다.

---

이렇게 사용해요!

1. 대상의 position이 어떤 녀석(속성)인지 정해준다.
2. 그다음에 어디에 배치할지 top, left, bottom, right로 위치를 정해줘야 한다.
   
   

 

---

속성은 다음과 같아요! 

• position: relative
  위에서 얘기한 것처럼 top, left, bottom, right를 같이 값을 입력해주면 얼마나 떨어뜨릴지 정할 수 있게 된다.
  대상을 그 자리에서 벗어나게 배치할 수 있게 해준다. 즉, 대상을 원래 위치를 기준으로 상대적(relative)으로 배치해준다고 생각하면 된다.
  
  
• position : absolute
  마치 relative와 반대되는 것처럼 느껴지지만.. (도대체 누가 이름을 이렇게 붙인 거야?) 이름과 같이 절대적으로 배치해주지 않음!! absolute라고 지정되면 상위 요소를 찾는다.
  부모에 position이 static이 아닌 첫번째 상위 요소가 해당 요소의 배치기준으로 설정된다. 만약 없다면 body요소가 배치기준이 된다. 이 녀석을 사용하려면 부모에 relative를 지정해주고 자식에게 absolute를 지정해주면 된다.
  
  
• position : fixed
  화면을 위 아래로 스크롤하더라도 브라우저 화면의 특정 부분에 고정되어 움직이지 않는 UI를 본 적이 있다. 이때 position을 fixed라고 지정하면 고정된(fixed) 위치에 배치할 수 있다. 자신이나 부모 요소가 아닌 뷰포트(viewport) 기준으로 즉, 브라우저 전체 화면이기 때문이다.
  
  
• position: sticky
  최근에 추가된 속성값이다. 브라우저 화면을 스크롤링할 때 효과가 있다. 즉, 스크롤할 때 화면 상단에 딱 달라붙어서 움직이지 않지만, 뒤에 배치된 요소는 계속 올라간다.
  
  

---

공부하다가 fixed와 sticky는 이름때문인지 모르지만 헷갈릴 때가 있었는데, fixed는 원래 그 자리에 고정된 것을 뜻하고 sticky는 스크롤하면 상단에 붙어서 더 이상 올라가지 않는 속성을 넣고 싶을 때 추가하면 된다.