css position

position속성

요소에 대하여 기준위치로부터 배치할 위치를 지정하는데 사용하는 속성.
css에서

• relative
  요소의 일반적인 위치(원위치)를 기준으로 위치를 지정
  

    🖥 selector를 기준으로 왼쪽과 위에서 10px만큼 떨어지게 하고 싶을땐,
       아래 코드처럼 작성!
       selector {
          position: relative; //secector의 일반적인 위치를 기준으로 지정
          top: 10px; //secector의 일반적인 위치를 기준으로 위에서 10px만큼 띄움
          left: 10px; //secector의 일반적인 위치를 기준으로 왼쪽에서10px만큼 띄움
        }

• absolute
  relative를 가진 부모가 필요하며, 부모요소를 기준으로 절대적인 위치를 지정
  

    🖥 부모요소를 기준으로 왼쪽과 위에서 10px만큼 떨어지게 하고 싶을땐,
       아래 코드처럼 작성!
       
       부모selector { 
       	  position: relative; //secector의 일반적인 위치를 기준으로 지정
        }
       
       selector {
          position: absolute; //부모secector를 기준으로 위치지정
          top: 10px; //부모secector의 일반적인 위치를 기준으로 위에서 10px만큼 띄움
          left: 10px; //부모secector의 일반적인 위치를 기준으로 왼쪽에서10px만큼 띄움
        }

• fixed
  눈에 보이는 브라우저 만큼, 화면내에서 위치를 지정
  ➡️ 스크롤바를 사용해 이동을 시켜도 고정되어 있다.

    🖥 브라우저를 기준으로 selector를 왼쪽과 위에서 10px만큼 떨어지게 하여 싶을땐,
       아래 코드처럼 작성!
       selector {
          position: fixed; //브라우저를 기준으로 위치를 지정하여 고정
          top: 10px; //브라우저를 기준으로 위에서 10px만큼 띄움
          left: 10px; //브라우저를 기준으로 왼쪽에서10px만큼 띄움
        }