[css] position 속성 테스트

css position test

css를 다룰때 마다 position의 값을 무엇을 써야 하는지 고민될때가 많았는데
글로 읽는것 보단 역쉬 데모를 보는게.. 이해가 빠르다.

	정적위치(static)	상대위치 (relative)	절대위치 (absolute)	고정위치(fixed)
기준위치	자기위치	자기위치	문서(html), 시작 위치는 static 기준으로 원래의 위치에 맞춰져 있음.	절대위치와 동일
부모의 크기	자식의 크기에 따라 변경	자식의 크기에 따라 변경되지만 위치를 변경함에 따라 부모의 크기가 변경되지는 않음	부모의 크기에 영향을 끼치지 않음	절대위치와 동일
자신의 크기	width:100%로 부모의 크기를 따름	width:100%로 부모의 크기를 따름	포함하고 있는 컨텐트의 크기 만큼 늘어남	절대위치와 동일
offset 사용(left,right.top,bottom)	불가	가능	가능	가능
스크롤	따라감	따라감	따라감	고정