значения свойства:
* {
margin
:
0
;
padding
}
.main {
height
500px
width
800px
position
absolute
top
50%
left
margin-top
-250px
margin-left
-400px
border
1px
solid
#808080
#div
1
, #div
2
3
4
5
{
100px
300px
relative
background-color
: rgba(
59
,
169
222
0.5
);
z-index
-50px
50px
-100px
-150px
150px
-200px
200px
* { margin: 0; padding: 0; } .main { height: 500px; width: 800px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -400px; border: 1px solid #808080; } #div1, #div2, #div3, #div4, #div5 { height: 100px; width: 300px; border: 1px solid #808080; position: relative; } #div1 { top: 0; left: 0; background-color: rgba(59, 169, 222, 0.5); z-index: 1; } #div2 { top: -50px; left: 50px; background-color: rgba(59, 169, 222, 0.5); } #div3 { top: -100px; left: 100px; background-color: rgba(59, 169, 222, 0.5); } #div4 { top: -150px; left: 150px; background-color: rgba(59, 169, 222, 0.5); z-index: 4; } #div5 { top: -200px; left: 200px; background-color: rgba(59, 169, 222, 0.5); z-index: 5; }
<!DOCTYPE html>
<
html
>
head
meta
charset
=
"utf-8"
/>
title
>New Page</
link
href
"css/style.css"
rel
"stylesheet"
script
type
"text/javascript"
src
"https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
></
</
body
div
class
"main"
id
"div1"
>Layer 1</
"div2"
>Layer 2</
"div3"
>Layer 3</
"div4"
>Layer 4</
"div5"
>Layer 5</
/*JavaScript*/
document.getElementById("div2").style.zIndex = "2";
/*jQuery*/
$(document).ready(function () {
$("#div3").css({ "z-index": "3" });
});