10.10 position

[position]

position: static; → 상대위치(문서를 작성하는 사람이 자유롭게 위치를 조절하기 힘듬)

*display에 관련된 정렬 속성만으로 정렬 가능

*변형 속성을(transform) 사용해야 자유롭게 위치를 조절할 수 있다.

 

position: 그외 값; → 절대 위치(문서를 작성하는 사람이 자유롭게 위치를 조절 가능)

*위치를 자유롭게 조절하려면 문서 흐름에서 벗어나야 한다. → 문서 위치를 벗어나야 하니까 기본 상태 태그 위에 떠다닌다.

-위치 속성을(life, right, top, bottom) 사용해서 자유롭게 위치를 조절할 수 있다.

-이 세가지 속성은 태그들끼리 순서를 정의할 수 있다.(z-index 속성)

-html문서 내에서 가장 아래에 배치된 태그가 화면상에서는 가장 위에 나온다.  

-상위태그에 relative가 없으면 body를 기준으로 위치를 잡는다.

- absolute만 적용 가능한 이야기

-fixed는 언제나 body 를 기준으로 위치를 잡는다. (상위 태그에 relative가 있어도 무시한다.)

 

[absolute, fixed 특징]

* absolute, fixed 적용 시 크기가 사라져서 코드가 안 먹힌것처럼 보일 수 있음(글자를 꼭 먼저 작성) 

-width: auto; → auto=0

-left:0;, right:0; 이 두가지를 함께 작성하면 상위태그 너비만큼 크기를 가질수 있음

-top:0;, bottom:0; 이 두가지를 함께 작성하면 상위태그 높이만큼 크기를 가질수 있음

-위치속성 속성 값에 수치를 준 상태로 left+right 또는 top+bottom 함께 사용 시 적용된 수치를 제외한 나머지 상위 태그 값을 가질 수 있음

-width: 100% or height: 100% 보다는 위치속성을 많이 사용한다.