Question

I’m trying to have a small grid drawn inside of a larger grid. Using zIndex doesn’t seem to work at all and I’m out of ideas.

Code for drawing the grid

Javascript/JQuery:

function creategrid(size){

          var primeW = Math.floor((400) / size),
              primeH = Math.floor((250) / size),
              standardW = Math.floor((500) / size),
              standardH = Math.floor((500) / size);

          var standard = document.createElement('div');
              standard.className = 'grid';
              standard.style.width = (standardW * size) + 'px';
              standard.style.height = (standardH * size) + 'px';

          var prime = document.createElement('div');
              prime.clasName = 'gridprime';
              prime.style.width = (primeW * size) + 'px';
              prime.style.height = (primeH * size)+ 'px';
              prime.style.zIndex= '-1';
              standard.appendChild(prime);

            for (var i = 0; i < standardH; i++) {
                for (var p = 0; p < standardW; p++) {
                  var cell = document.createElement('div');
                      cell.style.height = (size - 1) + 'px';
                      cell.style.width = (size - 1) + 'px';
                      cell.style.zIndex= '10';
                      standard.appendChild(cell);
                }
            }

          document.body.appendChild(standard);
        }

creategrid(10);

CSS for telling the grids apart.

CSS:

  .grid {
    margin: 0px auto auto;
    border: 1px solid #ccc;
    border-width: 0 1px 1px 0;
    background-color: #28ACF9;
  }

  .grid div {
    border: 1px solid #ccc;
    border-width: 1px 0 0 1px;
    float: left;
  }

  .gridprime {
    margin-top: 50px ;
    margin-left: 50px;
    border: 1px solid #000;
    color: #FFFF33;
    float: left;
  }

Right now the prime grid is either hidden or not loading the css assigned to it, the only way that you can tell it’s there is by the fact that it displaces the cells.

Ideally the cells will sit on top of the standard and prime grids, and the prime grid will correctly use the defined styles.

jsFiddle

Answer 1

You needed a

prime.style.position = 'absolute'

and

cell.style.positon = 'relative'

added to your z-indexes.

Check it out here http://jsfiddle.net/7MJpf/5/