본문 바로가기
  • 오늘도 한걸음. 수고많았어요.^^
  • 조금씩 꾸준히 오래 가자.ㅎ
IT기술/html

z-index 속성으로 배치 순서 결정하기

by 미노드 2017. 3. 23.

[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번 사각형이 맨 앞으로 나와 있습니다.

 



저작자표시 비영리 변경금지

'IT기술 > html' 카테고리의 다른 글

자바스크립트 쿠키 생성 document.cookie  (0) 2017.04.26
마크다운(Markdown)으로 글을 써보자  (0) 2017.04.04
overflow 속성 (overflow: visible, hidden, scroll, auto 차이)  (0) 2017.03.23
clear 속성에 대해 배워 보자 (clear:none, right, left, both)  (0) 2017.03.23
position 속성으로 정렬하기 (static, relative, absolute, fixed 차이)  (0) 2017.03.23

관련글

티스토리툴바