Experimenting with z-index

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.template.hbs

<div id="independent">
I am very independent
</div>

<div id="collection">
  <div id="container1">
  <div id="container2">
    <div id="item1">
      <div>item 1 this is</div>
      <div id="preview1">this is the preview for item 1</div>
    </div>
    <div id="item2">
      <div>DAS IST ITEM 2</div>
      <div id="preview2">das preview</div>
    </div>
    <div id="item3">
ITEM numba tree
      <div id="preview3">
        a very big preview
      </div>
    </div>
  </div>
  </div>
</div>

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

#collection {
  transform-style: preserve-3d;
}

#container1 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
  transform-style: preserve-3d;
}

#container2 {
  position: relative;
  width: 400px;
  height: 400px;
}

#item1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 31px;
  transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1);
  background: red;
  transform-style: preserve-3d;
//  -webkit-transform-style: preserve-3d;
}

#preview1{
  position: absolute;
  left: 20px;
  top: 25px;
  background: yellow;
  transform: translateZ(10px);
//  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
  z-index: 1;
}

#independent{
  position: absolute;
  left: 0px;
  top: 0px;
  background: orange;
  transform: translateX(200px) translateY(40px) translateZ(-50px);
  transform-style: preserve-3d;
  z-index: 1
}

#item2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 31px;
  transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,31,0,1) translateZ(-10px);
  transform-style: preserve-3d;
  background: green;
}

#item3 {
  position: absolute;
  top: 0;
  left: 0;
  width: 400px;
  height: 31px;
  transform: translateY(60px) translateZ(-10px);
  z-index: 1;
  background: purple;
}

#preview3 {
  position: absolute;
  width:300px;
  height: 300px;
  top: -50px;
  left: 100px;
  background: blue;
}

twiddle.json

{
  "version": "0.4.10",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}