Grid inside Javascript and JQuery grid:

I am trying to create a small mesh inside a large mesh. Using zIndex doesn't work at all and I have no 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 laying out grids.

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 main grid is either hidden or not being loaded by the css assigned to it, the only way you can tell this is that it is offsetting the cells.

Ideally, the cells will sit on top of the standard and main grid, and the main grid will use certain styles correctly.

jsFiddle

+3


source to share


1 answer


You needed

prime.style.position = 'absolute'

      

and



cell.style.positon = 'relative'

      

added to your z-indices.

Have a look here http://jsfiddle.net/7MJpf/5/

+2


source







All Articles