z-index javascript css問題

Question

我在可通過jquery拖動的頁面上動態創建div。

我在每個div上添加了一個小按鈕，允許用戶通過點擊刪除div。

我遇到的問題是，我將突出顯示的div設置爲頁面上最重要的項目，但是如果div與另一個div重疊，並且用戶單擊了刪除按鈕，則下面的div將被高亮顯示，該按鈕被點擊。

我已經定位了div中的按鈕，但位置似乎沒有任何影響。該按鈕被添加到div。

我會假設它的東西與按鈕的z-index的做，但我可能是完全錯誤的軌道

任何幫助，將不勝感激的。

這裏是我用來追加按鈕到div的代碼。該代碼在創建div函數循環內創建div後立即調用。

var but=document.createElement('input'); 
    but.setAttribute('type','button'); 
    but.setAttribute('class','removebutton'); 
    but.style.position = "absolute"; 
    but.style.top = "15px"; 
    but.style.left = +width+"px"; 
    but.style.float="right"; 
    but.style.visibility="hidden"; 

    but.onclick=function(){ 
    if(confirm('Really delete?')) 
     {     
     $.post("delete_box.php",{i:i, page_ref:'<? echo $page_ref; ?>', template_ref:'<? echo $template_ref; ?>'}, function(data,status){ });  
    document.getElementById("frmMain").removeChild(newdiv); 
    document.getElementById(id).removeChild(but); 
    document.getElementById(id).removeChild(newbr); 

     }    
    } 

這裏是我使用帶來的點擊股利前推別的回（每格有dragbox類名）

$('.dragbox').click(function() 
     { 
     $(".removebutton").css('visibility', 'hidden'); 
     $(this).css({ 
     'background-image':'url(img/move.png)', 
     'background-repeat':'no-repeat', 
     'width':'15px', 
     'height':'15px', 
     'zIndex':'1000' 
     }) 
     $(this).find(".removebutton").css('visibility', 'visible'); 

    }); 



$('.dragbox').focusout(function() { 
    $(this).css({ 
        'border', '0px', 
      'background-color', 'transparent', 
      'width', '0px', 
      'z-index', '0' 
     })  
     }); 

Answer 1

我認爲你需要停止傳播的代碼按鈕上的點擊事件。

當用戶點擊按鈕時，點擊事件將被傳遞（又名bubbeling）到點擊位置的所有基礎元素。

but.onclick = function(e){ 
    e.stopPropagation(); // stop the propagation of the click event to other elements 

    // ... your code    
}