z-index는 누가 화면 상단에 있을지 순서를 부여하는 것.
개념 자체는 x, y, z축 3차원 개념, 입체적인 개념인것 같다.
오브젝트가 겹쳤을 때 어떤 오브젝트가 위에 보이게 할 지 순서를 매기는 것이다.
공지, 팝업 같은 기능에 자주 쓰인다.
다음 opacity는 투명도 옵션을 말한다.
값은 0~1까지 부여되며
0으로 갈 수록 투명해진다.
0.2~0.5 정도가 반투명하게 사용 할 때 적당한 값이다.
<html>
<head>
<meta charset="UTF-8">
<title>Input</title>
<link rel="icon" href = "img/btn.png">
<style>
div{
width: 300px;
height: 300px;
text-align: center;
}
#div1{
border: 3px dashed green;
background-color: yellow;
position: relative;
top: 10px;
z-index: 8;
opacity: 0.5;
}
#div2{
border: 3px dashed red;
background-color: orchid;
position: absolute;
top: 250px;
left: 20px;
z-index: 3;
}
#div3{
border: 3px dashed hotpink;
background-color: mediumspringgreen;
position: absolute;
top: 100px;
left: 250px;
z-index: 5;
}
</style>
<!--스타일이 많으면 로딩이 느려질 수 있다.-->
<!--아이디가 # 클래스가 . 태그는 p-->
</head>
<body>
<div id="div1">DIV1</div>
<div id="div2">DIV2</div>
<div id="div3">DIV3</div>
</body>
</html>
예전에 예제로 사용한 화면에 공지를 띄어보자
'HTML, CSS, JavaScript, jQuery > 03.CSS' 카테고리의 다른 글
| [CSS]03-12.배운걸 토대로 간단한 사이트 만들기 (0) | 2018.10.18 |
|---|---|
| [CSS]03-11.sprite image, 이미지를 애니메이션 처럼 표현 (0) | 2018.10.18 |
| [CSS]03-09.position(static, relative, absolute, fixed) 요소의 위치 속성 (0) | 2018.10.17 |
| [CSS]03-08.clear(float 정렬 줄 넘김) (0) | 2018.10.17 |
| [CSS]03-07.display, visibility, 요소 숨기기 / 보이기 / 삭제 / 블록 / 인라인 (0) | 2018.10.17 |