position

position은 엘리먼트의 위치를 설정하는 값이다. 

• position속성을 따로 지정하지 않으면 기본값이 static이다. 
• 블록 엘리먼트는 아래쪽으로 순서대로 배치되고, 인라인 엘리먼트는 오른쪽으로 순서대로 배치된다. 
• 엘리먼트의 위치를 지정할 수 없다. 
• https://lionpower.tistory.com/66?category=903520

css문법 (font나머지~ transition초반)

position을 확인하는 것이 더 좋다. 더 자세히 정리가 되어있다. 

 

relative는 요소의 자신을 기준으로 배치한다. 

absolute는 구조적이 아닌 위치상의 부모요소 기준으로 배치한다. 

• relative는 조심해서 사용하여야한다. absolue를 추천한다. {position:relative;}의 경우 스스로를 기준으로 삼고있기 때문에, 이동하기 위해서는 자기자신의 위치가 필요하기 때문에 형제 요소에 영향이 간다. 
  • position의 속성을 relative으로 지정하면 static일 때 위치를 기준으로 엘리먼트의 위치를 top, bottom, left, right속성을 지정할 수 있다. 원래의 위치에서 이동할 수 있다. 
• absolute는 위치상의 부모요소를 기준으로 하고 있어 부모요소의 설정을 위치상으로 지정을 안해둘 경우 body태그를 올라가 시스템을 부모요소로 하여 view포트가 부모요소의 역활을 하게 된다. 그렇기 때문에 부모요소에 따로 작성이 안되있을 경우 기계적으로 position:relative;를 입력하면 된다. 
  • position속성을 absolute로 지정하면 화면에 최상단좌측을 기준으로 (0,0 위치 ) top, bottom, left, right의 속성으로 위치시킬 수 있다. 
  • 절대좌표를 설정한다. 
  • 절대좌표로써 내가 원하는 위치에 놓을 수 있는 속성이다. 
  • 상위 엘리먼트의 position속성이 relativ,absolute, fixed로 설정되어있으면 absolute로 위치를 지정할때 기준점이 상위엘리먼트의 최상단 좌측이 기준이 된다. 
• fixed는 viewport를 기준으로 배치된다. body의 height를 4000px로 설정하였다면, 스크롤이 생기는데 스크롤이 되더라도 설정한 위치에 고정된다. 예를 들면 쇼핑몰 고객상담과 동일하게 움직인다. 
  •  position속성을 fixed로 지정하면 화면이 스크롤이 되더라도 항상 지정된 위치에 표시된다. 
• sticky는 스크롤 영역 기준으로 배치된다. 앞서 이야기한것처럼 top,bottom,left,right 중에서 적어도 1개이상은 입력을 해야한다. internet explorer에서는 사용이 불가하다. 일부분이 고정되어 스크롤 영역과 연관이 높다. 

요소 쌓임 순서 (stack order) = 자바의 정석에서 배웠던 main -> 1-> 2->3의 순서로 요소가 쌓이는 부분을 생각하면 쉽다. 요소가 쌓여있는 순서를 통해 어떤요소가 사용자와 가깝게 있는지(위로 쌓이는지)를 결정한다. ( Z축)

1.  static 을 제외한 position 속성의 값이 있을 경우 가장위에 쌓인다. 값은 무관하다. ( static : 없음이란 의미기 때문)
2.  position이 모두 존재할 경우, z-index속성의(유효값) 숫자값이 (특정값) 높을 수록 위에 쌓인다. 
3.  position의 속성값이 있고, z-index 속성의 숫자값이 같다면, html 의 마지막 코드 일수록 위에 쌓임( 나중에 작성한 코드(요소))