3

大きなグリッドの中に小さなグリッドを描画しようとしています。zIndex の使用はまったく機能していないようで、アイデアがありません。

グリッドを描画するためのコード

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。

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;
  }

現在、プライム グリッドは非表示になっているか、それに割り当てられた css をロードしていません。それが存在することを確認できる唯一の方法は、セルを移動することです。

理想的には、セルは標準グリッドとプライム グリッドの上に配置され、プライム グリッドは定義されたスタイルを正しく使用します。

jsフィドル

4

1 に答える 1

2

あなたは

prime.style.position = 'absolute'

と

cell.style.positon = 'relative'

z インデックスに追加されます。

ここでチェックしてくださいhttp://jsfiddle.net/7MJpf/5/

于 2013-01-22T18:05:16.330 に答える