2013-01-22 70 views
3

我想要在更大的網格內繪製一個小網格。使用zIndex似乎根本不起作用,我不知道該如何做。網格里面的網格Javascript和jQuery:

代碼繪製網格

的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,你可以告訴它的存在是由它取代的細胞這一事實的唯一途徑。

理想情況下,單元格將位於標準網格和主要網格的頂部,並且主要網格將正確使用定義的樣式。

jsFiddle

+0

首先,你的首要電網拼錯'className'。 – voithos

+0

這是對未加載的CSS進行排序。謝謝:) –

回答

2

您需要

prime.style.position = 'absolute' 

cell.style.positon = 'relative' 

添加到您的z索引。

看看這裏http://jsfiddle.net/7MJpf/5/

+0

謝謝,這是排序的單元格被排序。仍然堅持如何讓主要網格出現在正確的顏色和從CSS的邊界。 –

+0

你試圖得到什麼顏色和邊框? – Taraes

+0

它已被排序...我設法在primeName中爲拼寫錯誤。謝謝你,雖然 –