251010 position 연습

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

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

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

 

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

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

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

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

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

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

ㄴ absolte만 적용 가능한 이야기

ㄴ 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% ;보다는 위치 속성을 많이 사용한다. 

 

- top 속성값에 고정 px을 사용할 수 없음

- 2차 메뉴 -> 기본상태 : display: none; -> 이벤트 상태 : block

- width: 100%를 사용할수 없음