Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE>
<html>
  <head>
    <title>Transform-style: preserve-3d creates a stacking context</title>
  </head>
  <body>
​
    <div id="div1">
      <h1>Division Element #1</h1>
      <code>position: relative;<br/>
      z-index: 5;</code>
    </div>
​
​
    <div id="div3">
      <div id="div4">
        <h1>Division Element #4</h1>
        <code>position: relative;<br/>
        z-index: 6;</code>
      </div>
​
      <h1>Division Element #3</h1>
      <code>-webkit-transform-style: preserve-3d;</code>
​
​
    </div>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context">Source</a></p>
    <p><a href="http://jsbin.com/walonigu/10/edit">Edit source</a></p>
  </body>
</html>
 
* {
  margin: 0;
}
html {
  padding: 20px;
  font: 12px/20px Arial, sans-serif;
}
​
h1 {
  font: inherit;
  font-weight: bold;
}
#div1{
  border: 1px dashed #696;
  padding: 10px;
  background-color: #cfc;
position: relative;
  z-index: 5;
  margin-bottom: 190px;
  opacity: 1;
  width: 200px;
}
#div3 {
-webkit-transform-style: preserve-3d;
  margin-top: -250px;
  width: 300px;
  border: 1px dashed #900;
  background-color: #fdd;
  padding: 40px 20px 20px;
}
#div4 {
  border: 1px dashed #996;
  background-color: #ffc;
position: relative;
  z-index: 6;
  margin-bottom: 15px;
  padding: 25px 10px 5px;
}
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers