z-index懸停在不起作用

我試圖創建一個懸停在事件，將不會影響我的佈局的其餘部分。看來z-index是做到這一點的方法，但我無法實現它。我試圖堅持使用CSS，但jQuery是可行的。z-index懸停在不起作用

HTML

<div class="big-square" id="br"> 
    <div class="little-square" id="br-tl"></div> 
    <div class="little-square" id="br-tr"></div> 
    <div class="little-square" id="br-bl"></div> 
    <div class="little-square" id="br-br"> </div> 
</div>

CSS

.big-square 
{ 
    position: relative; 
    z-index: 1; 
    font-size: 2em; 
    float: left; 
    width: 30%; 
    min-width: 4em; 
    min-height: 4em; 
    margin: 0 2% 2% 0; 
    background: #000; 
} 
.little-square 
{ 
    position: relative; 
    z-index: 1; 
    cursor: pointer; 
    float: left; 
    width: 48%; 
    height: 48%; 
    background: #cd2626; 
} 
.little-square:hover 
{ 
    z-index: 1000; 
}

jQuery的

$(document).ready(resizeBigSquare); 
window.onresize = resizeBigSquare; 
function resizeBigSquare() { 
    $('.big-square').css(
     { 
      'height': ($('.big-square').width() * .85) + 'px', 
      'line-height': ($('.big-square').width() * .85) + 'px' 
     }); 
    $('.little-square, .rectangle-top, .rectangle-bottom').css(
     { 
      'line-height': $('.little-square').height()+ 'px' 
     }); 
}

來源

2012-08-22 user1134179

我認爲你不能一起使用浮動和位置。基本上浮動渲染其他元素放置後的文檔。與位置屬性相同。所以我想如果你想用z-index懸停擺脫浮動。 –

我刪除了花車，它仍然無法工作。 – user1134179

js請好嗎？ –