레이아웃 (5) POSITION 속성의 활용

position속성의 활용

 

(1) 텍스트와 이미지 겹치기

 

See the Pen WNNejNj by ++EXP (@pp_exp) on CodePen.

 

(2) 슬라이드 쇼 : 틀이 있는 겹침 이미지 만들기

 

See the Pen qBBWmoB by ++EXP (@pp_exp) on CodePen.

 

슬라이드 쇼 만들기에서 주로 사용하는 틀-배경 움직임 요소 만들기. 부모 요소에는 position:relative를 지정 후, 자식 요소에는 position:absolute 요소를 지정할 수 있다. 단, 이전에 position요소를 선언한 적이 있다면, 위치를 가릴 수 있으므로, z-index 속성을 반드시 끼워 넣어야 한다. 

(3) 고정 사이드 바 만들기.

 

See the Pen 고정 사이드 바 by ++EXP (@pp_exp) on CodePen.

 

쇼핑몰, 광고 등지에서 자주 사용되는 사이드 바 형식의 요소. 

position:fixed 속성을 부여해서 만들 수 있고, 브라우저 출력 영역을 기준으로 최상단, 좌우측이 0,0이 된다.