儘管z-index

Question

我正在研究一個我的愛好項目 - 這是一個榮耀的RSS閱讀器/抓取器。我已經能夠獲得大部分工作，但出於某種原因，我無法在特定範圍內將文本繪製在動畫div上方。

當抓取Feed時，在顯示結果之前執行某些操作。在此期間，我會跟蹤進度並將其顯示在動畫「進度條」div中。所有的子操作都有自己的進度條，它們都可以正常工作（文本位於欄頂部），但最終的進度條（總體進度）不能正確地對文本進行分層。

我創建了simple mock-up in JSFiddle來舉例說明我的問題。

$('#progress-total-box').bind('click', draw); 

function draw() { 
    if (($('#progress-totalbar-fill').css('width')) == "0px") { 
     $('#progress-total-box').unbind(); 
     $('#progress-totalbar-fill').animate({width: '100%'}, 2000, function() { 
      var description = document.createElement('span'); 
      $(description).attr('id', '#progress-total-text'); 
      $(description).html('100%'); 
      $('#progress-totalbar-empty').append(description); 
      $('#progress-total-box').bind('click', draw); 
     }); 
    } 
    else { 
     $('#progress-total-box').unbind(); 
     $('#progress-totalbar-fill').animate({width: 0}, 2000, function() { 
      document.getElementById('progress-totalbar-empty').innerHTML = ''; 
      $('#progress-total-box').bind('click', draw); 
     }); 
    } 
} 

樣式/位置/ etc純粹是爲了演示。在這個例子中，當點擊灰色的加載條div時，它的寬度從0％到100％（或反之亦然）。動畫完成後，會創建一個新的子跨度並將其附加到「空白欄」背景div，其中顯示總百分比（在此情況下爲100％）。

當條重置時，此span標籤被有意刪除。

你們有什麼想法，我該如何解決？

我遇到了這個錯誤，在Chrome和Firefox中都有。

在此先感謝！

Answer 1

這裏有很多問題。

首先，你需要從該行

$(description).attr('id', 'progress-total-text'); 

新跨越去除#，從來沒有得到它應該的CSS。 其次，你需要改變你的標記或你的CSS。 在這種情況下，我更新了CSS，但ID名稱沒有意義了

body { 
    width: 100%; 
    height: 125px; 
    margin: 0; 
} 

#progress-category-box { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    font-size: 0; 
    background-color: red; 
} 

#progress-total-box { 
    position: relative; 
    width: 100%; 
    height: 40px; 
    top: 32.5%; 
    float: right; 
    text-align: center; 
    background-color: #515A5C; 
} 

#progress-totalbar-empty { 
    position: relative; 
    width: 100%; 
    height: 100%; 
    border: 1px solid #97b0b1; 
    background-color: transparent; 
    z-index: 3; 
} 

#progress-totalbar-fill { 
    position: relative; 
    width: 0%; 
    height: 100%; 
    top: -42px; 
    border-left: 1px solid #97b0b1; 
    border-top: 1px solid #97b0b1; 
    border-bottom: 1px solid #97b0b1; 
    background-color: #00FF00; 
    z-index: 2; 
} 

#progress-total-text { 
    position: relative; 
    color: black; 
    top: 30%; 
    font-size: 15px; 
    z-index: 3; 
} 

事情是，你展示動畫的div課文。 所以我把文字放在動畫上面，並在它後面放置一個透明背景。 我將灰色背景應用於容器。我也改變了它的身高，並將height:100%應用到它的孩子身上。

Here's a full fiddle