Skip to content

Instantly share code, notes, and snippets.

@joeytrapp

joeytrapp/index.html

Last active August 29, 2015 14:05
Show Gist options
  • Save joeytrapp/8d8dab1cdf0909d49953 to your computer and use it in GitHub Desktop.
Save joeytrapp/8d8dab1cdf0909d49953 to your computer and use it in GitHub Desktop.
Download ZIP
z-index demo
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<title>z-index test</title>
<style>
body {
z-index: 100;
background: white;
}
div {
position: absolute;
height: 100px;
width: 100px;
}
.basement {
top: 0;
left: 0;
z-index: 0;
background: red;
}
.first {
top: 10px;
left: 10px;
background: orange;
/*z-index: 100;
z-index: 1;*/
}
.second {
top: 20px;
left: 20px;
z-index: 200;
background: yellow;
}
.third {
top: 30px;
left: 30px;
z-index: 300;
background: green;
}
.forth {
top: 40px;
left: 40px;
z-index: 400;
background: blue;
}
</style>
</head>
<body>
<div class="forth"></div>
<div class="third"></div>
<div class="second"></div>
<div class="first"></div>
<div class="basement"></div>
</body>
</html>
Raw
wrapped.html
<!DOCTYPE html>
<html>
<head>
<title>z-index test</title>
<style>
section.app {
z-index: 100;
background: white;
position: relative;
}
div {
position: absolute;
height: 100px;
width: 100px;
}
.basement {
top: 0;
left: 0;
z-index: 0;
background: red;
}
.first {
top: 10px;
left: 10px;
background: orange;
/*z-index: 100;
z-index: 1;*/
}
.second {
top: 20px;
left: 20px;
z-index: 200;
background: yellow;
}
.third {
top: 30px;
left: 30px;
z-index: 300;
background: green;
}
.forth {
top: 40px;
left: 40px;
z-index: 400;
background: blue;
}
</style>
</head>
<body>
<section class="app">
<div class="forth"></div>
<div class="third"></div>
<div class="second"></div>
<div class="first"></div>
<div class="basement"></div>
</section>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment