[html/css] z-index 속성으로 배치 순서 결정하기
어제는 레이아웃이나 배치를 정렬하는 position 속성에 대해 배웠습니다.
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)
그런데 이렇게 배치한 객체가 겹칠 때가 있습니다.
오늘 배울 부분은 z-index란 속성인데요
어느 객체가 앞으로 나오고, 뒤에 나올지 배치 순서를 결정하는 속성입니다.
z-index는 position (relative, absolute, fixed)속성이 적용된 요소에서만 작동합니다.
|
auto : 기본값으로 z-index를 지정하지 않은 것과 같음
number : 배치 순서를 결정, 숫자가 낮을수록 뒤에 배치되며 숫자가 높을수록 앞에 나옴
-1 처럼 음수도 가능합니다.
initial : 기본값으로 설정함
|
버전은 css2임.
사용 예:
#side_left {
position: absolute;
top: 0;
right: 0;
z-index: 1;
}
[z-index 속성 연습하기 ]
우선 아래 이미지를 만들어보겠습니다.
아래 이미지는 z-index를 적용하지 않고 position:absolute 만으로 자동 정렬된 것입니다...
|
<!DOCTYPE html>
<html>
<head>
<style type="text/css"> #absolute1, #absolute2, #absolute3, #absolute4, #absolute5, #absolute6
{
width:100px;
height:100px; position:absolute;
} #absolute1
{
background-color:#FFD9FA;
top:0px;
left:0px;
}
#absolute2
{
background-color:#FFB2F5;
top:0px;
left:30px;
}
#absolute3
{
background-color:#F361DC;
top: 0px;
left: 60px;
}
#absolute4
{
background-color:#D941C5;
top: 0px;
left: 90px;
}
#absolute5
{
background-color:#990085;
top: 0px;
left: 120px;
}
#absolute6
{
background-color:#660058;
top: 0px;
left: 150px;
}
</style>
</head> <body>
<div id="absolute1">
1. absolute
</div>
<div id="absolute2">
2. absolute
</div>
<div id="absolute3">
3. absolute
</div>
<div id="absolute4">
4. absolute
</div>
<div id="absolute5">
5. absolute
</div>
<div id="absolute6">
6. absolute
</div>
</body>
</html>
|
이번에는 z-index 속성을 사용하여, 위에서 본 이미지를 역순으로 정렬해보겠습니다.
z-index.htm
|
<head>
<style type="text/css"> #absolute1, #absolute2, #absolute3, #absolute4, #absolute5, #absolute6
{
width:100px;
height:100px;
position:absolute;
} #absolute1
{
background-color:#FFD9FA;
top:0px;
left:0px;
z-index: 6;
}
#absolute2
{
background-color:#FFB2F5;
top:0px;
left:30px;
z-index: 5;
}
#absolute3
{
background-color:#F361DC;
top: 0px;
left: 60px;
z-index: 4;
}
#absolute4
{
background-color:#D941C5;
top: 0px;
left: 90px;
z-index: 3;
}
#absolute5
{
background-color:#990085;
top: 0px;
left: 120px;
z-index: 2;
}
#absolute6
{
background-color:#660058;
top: 0px;
left: 150px;
z-index: 1;
}
</style>
</head> |
실행 화면입니다. 아까 맨 아래에 있던 1번 사각형이 맨 앞으로 나와 있습니다.
oveflow 속성 (oveflow: visible, hidden, scroll, auto 차이)
[css] - DIV 태그를 이용하여 레이아웃 만들기
[css 기초] float 속성에 대하여
[HTML, CSS 기초] class, id 선택자
CSS란? (HTML과 CSS의 차이, CSS 작성법)
댓글