[CSS] 위치를 지정하자! position , z-index 2-1

자 오늘은 position에대해서 배울겁니다아

잘 보세요 !

들어가기에 앞서서 말씀드립니다.

궁금한거는 무조건 댓글로 물어보세요!

모르는건 부끄러운게 아닙니다. 모르는걸 아는체하는게 부끄러운거죠.

---

position 속성에대해서 알아보겟습니다.

position을 사용하는 방법은

 position:relative;
 position:absolute;
 position:fixed;
 position:static;

이렇게 총 4가지가 있습니다.

그치만 저는 주로 relative, absolute, fixed 를 주로 사용합니다.

왜냐하면 이 3가지로도 충분히 구연이 가능하기때문입니다.

1. relative - 상대지정

relative는 상대지정입니다.

즉, 브라우저의 꼭지점이 기준이 아니라 body안에 div를 만들었을때 div의 꼭지점을 기준으로 위치가 정해집니다.

만약 500*500 크기의 도형을 만들었다고 하면

브라우저의 해상도가 몇만*몇만 이라할지언정 500*500의 크기인 도형 내에서만 위치를 지정줄 수 있습니다.

하지만 도형안에 들어갈 도형이 크거나 위치를 너무 멀리 지정하여서  도형 혹은 텍스트가 큰 도형을 벗어날 경우, 짤리지않고 그대로 작성이 됩니다.

2. absolute - 절대지정

absulute는 절대지정입니다.

relative는 div에 지정을 하였다면 absolute는 최 상위 경로인 body를 기준으로 하여서 위치를 지정할 수 있습니다.

만약 body를 넘어버릴경우 스크롤바가 생기게 됩니다.

3.fixed - 화면 고정

이 fixed는 무조건 화면에 고정이 됩니다.

제 블로그의 헤더를보면 스크롤을 내려도 고정이되죠?

이게 바로 fixed 입니다.

참 쉽죠?

4. z-index 2-1

이것은 도형을 만들었을때 어느게 맨 위로 올라올지, 맨 밑으로 내려갈지를 정하는 속성입니다.

width 나 height는 y-axis , x-axis 로 이동을 하는데

z-index는 z-axis 로 이동을합니다.

즉, [ 왼쪽 오른쪽 위 아래 ] 가아닌 [ 앞 뒤 ] 로 움직이게합니다.

이 z-index에 관해서는 오늘 기본적으로 알려드리고 다음 강좌에서 속성 같은 걸 알려드리겠습니다.

다른 1가지. 제가 잘 사용하지않아서 모르는것은 타 사이트 링크를 걸어드리겠습니다.

외국 사이트지만 소스코드만 보면 아실거라믿고 링크 걸겟습니다.

※모든 링크는 w3shcools.com 임을 알립니다.※

static - http://www.w3schools.com/css/css_positioning.asp ( absolute, relative, fixed 가 있군요 .. 제 글은 참고삼아서 보십시오! )