- absolute, relative, hidden, visible 등을 사용하다 보면 본의 아니게 문서가 복잡해지고 상자가 겹쳐서 보여지는 경우가 발생할 수 있습니다. 이렇게 상자가 겹칠 경우 어떤 상자를 앞에 보여주고, 어떤 상자를 뒤에 보여줄 것인지를 결정해야 하는데, 이때 z-index를 활용하면 유용하게 순서를 정할 수 있습니다.
- 이처럼 z-index는 stacking order라 하여 내용물들이 누적되는 순서를 결정할 때 사용하며, z-index의 기본값은 0으로 되어 있으며 숫자가 클수록 위에 나타납니다.
- z-index를 적용하지 않았을 경우에 상자가 교차하게 된다면, HTML코드 중 나중에 적힌 것이 위에 나타납니다.
- 이 z-index개념은 레이어의 개념과 동일합니다. "레이어=상자" 개념으로 이해하시면 되겠습니다.
- z-index는 항상 absolute일 경우에만 적용할 수 있습니다. 꼭~! 기억하세요.
|
| z-index를 적용하지 않은 경우 |
| 메모장 |
< html >
< head >
< style type="text/css" >
P.one{position:absolute;left:50;top:50;width:200;height:150;color:black;
font-family:굴림;font-size:15;background:yellow;border:solid}
P.two{position:absolute;left:110;top:100;width:200;height:150;color:blue;
font-family:굴림;font-size:15;background:gray;border:solid}
P.three{position:absolute;left:160;top:150;width:200;height:150;color:pink;
font-family:굴림;font-size:15;background:red;border:solid}
< /style >
< /head >
< body >
< P class="one">ONE< /P >
< P class="two" >TWO< /P >
< P class="three">THREE< /P >
< /body >
< /html >
|
|---|
| 브라우저 |
|
|---|
| 설명 |
- z-index값이 적용되지 않은 경우는 위와 같이 태그의 적용순서에 따라 맨 나중에 써준 태그가 가장 맨 위에 나타납니다.
|
|
|---|
| z-index를 적용한 경우 |
| 메모장 |
< html >
< head >
< style type="text/css" >
P.one{position:absolute;left:50;top:50;width:200;height:150;color:black;
font-family:굴림;font-size:17;background:yellow;border:solid;z-index:2;}
P.two{position:absolute;left:110;top:100;width:200;height:150;color:blue;
font-family:굴림;font-size:17;background:gray;border:solid;z-index:1;}
P.three{position:absolute;left:160;top:150;width:200;height:150;color:pink;
font-family:굴림;font-size:17;background:red;border:solid;z-index:0;}
< /style >
< /head >
< body bgcolor=#FFFF66 >
< P class="one">ONE< /P >
< P class="two">TWO< /P >
< P class="three">THREE< /P >
< /body >
< /html >
|
|---|
| 브라우저 |
|
|---|
| 설명 |
- z-index 값에 따라서 상자의 위치가 달라졌죠? z-index 값의 수치가 높을수록 위의 그림처럼 상위에 배치하게 됩니다.
|
|
|---|
|