반응형
|
스타일 시트 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 |
