HTML5 CSS3 홈페이지 스타일링 2 - 포지션 position

position

position 속성은 html 요소를 좌표값(top,bottom,left,right)를 이용하여 원하는 위치에 배치하는 속성입니다.

속성의 종류에는

-정적인 static

-절대적인 absolute

-상대적인 relative

-고정적인 fixed

등이 있습니다.

 

position:static; //속성의 기본값으로 앞에 문서의 흐름을 받는 것을 끊을 때 주로 사용합니다.

position:absolute; //절대적인 위치값으로 좌표값 적힌 그대로 위치를 표시합니다.

부모의 포지션 속성을 relative로 작성한 후 자식의 포지션을 absolute로 할 경우 부모 위치 기준에서 절대적인 위치로 잡힙니다.

position:relative; //상대적인 위치 값

position:fixed; //부모요소와 관계가 없으면서 스크롤하더라도 항상 같은 위치값을 갖습니다.

 스크롤바를 내려도 상단에 고정 되어있는 메뉴등에 주로 쓰입니다.

 

 

z-index

여러 요소들이 겹쳐 있을 때 보이는 순서를 정하고 싶다면 z-index를 사용할 수 있습니다.

z-index:3; // 숫자가 클수록 앞에 보이게 됩니다.