반응형
스타일 시트 CSS z-index 태그 요소 보이는 순서를 결정 |
환경: Eclipse Mars |
z-index 속성은 position 속성과 같이 사용됩니다. 왜냐하면 position: absolute 로 지정할 경우 스크롤을 따라 다니기 때문에 다른 태그와 겹쳐질 수 있습니다. 이때 화면에 보여 주는 순서를 지정하지 않으면 가려지게 됩니다. z-index 에 값이 높을 수록 위쪽에 위치합니다. 스크롤을 따라다니는 위아래 아이콘을 지정할 때 많이 이용합니다.
▼ z-index 의 값은 기본값이 0 이며 마이너스 값도 지정이 가능합니다. 그리고 숫자가 높을 수록 앞에 배치할 수 있습니다. 만약 auto 로 값을 지정하게 되면 태그의 순서대로 제일 나중에 나오는 태그부터 상단에 위치합니다. 샘플은 3개의 div 에 z-index 값을 차례대로 1, 2, 3 을 적용해서 마지막 div 가 제일 위로 올라오게 만들었습니다.
<!DOCTYPE HTML> <html> <head> <meta charset="euc-kr"> <title>CSS 속성</title> <style type="text/css"> body { background-color: #e7e7e7; } div { width: 300px; height: 60px; border: 1px solid; padding: 20px; } #zindex1 { position: absolute; top: 10px; left: 10px; background-color: #F9F249; z-index: 1; } #zindex2 { position: absolute; top: 50px; left: 50px; background-color: #69F354; z-index: 2; } #zindex3 { position: absolute; top: 100px; left: 100px; background-color: #36FFFF; z-index: 3; } </style> </head> <body> <div id="zindex1">position: absolute z-index: 1</div> <div id="zindex2">position: absolute z-index: 2</div> <div id="zindex3">position: absolute z-index: 3</div> </body> </html>
반응형
'웹 프로그래밍 > 스타일시트 CSS' 카테고리의 다른 글
스타일 시트 CSS border-radius 속성, 테두리, 모서리를 둥글게 표시하기 (0) | 2018.08.25 |
---|---|
스타일 시트 CSS display 속성, 태그의 inline 과 block 속성 바꾸기 (0) | 2018.08.09 |
스타일 시트 CSS 마우스 모양을 바꾸는 cursor 속성 알아보기 (1) | 2018.07.27 |
스타일 시트 CSS 적용 우선 순위 알아 보기 (1) | 2018.07.20 |
스타일 시트 CSS position 속성, 태그의 위치를 설정하는 방법 (0) | 2018.06.27 |
스타일 시트 CSS 안쪽 여백 설정하는 padding 속성 알아보기 (1) | 2018.06.15 |
스타일 시트 CSS clear 속성, float 기능을 제거하는 방법 (0) | 2018.05.21 |
스타일 시트 CSS float 속성, 이미지와 텍스트를 배치 시키는 속성 (1) | 2018.05.11 |