可拖動和可拖動的Z指數問題

Question

我使用拖放jQuery UI來創建表單輸入，但Z-index有一個問題，而拖動元素是在正確的div後面，但在刪除它後可見。那麼如何解決這個問題，使元素右邊的div可見的同時拖動

JSFIDDLE

在JS

$('#main1 div').draggable({ 
    cursor: 'pointer', 
    connectWith: '.dropme2', 
    helper: 'clone', 
    zIndex: 10 
}); 

$('.dropme2 form').sortable({ 
    connectWith: '.dropme', 
    cursor: 'pointer', 
    zIndex: 1000 
}); 

HTML

<div class="dropme" id="main1"> 
    <div id="ytvid">YouTube video</div> 
    <div id="paragraph">Paragraph</div> 
</div> 

<div class="dropme2" id="trash"> 
    <form id="form" style="width: 100%; min-height: 100px; float: left; padding-bottom: 40px; 
    position: relative; z-index: 2;"> 
    <input type="submit" id="getids" value="save" style="position: absolute; bottom: 0; left: 48%;" /> 
    </form> 

</div> 

CSS

#trash, 
#main1 { 
    display: inline-block; 
    width: 250px; 
    min-height: 100px; 
    overflow: hidden; 
    float: left; 
    margin-right: 30px; 
    background: rgb(236, 237, 240); 
} 
#trash { 
    width: 300px; 
    float: right; 
    position: relative; 
    z-index: 1; 
} 
#main1 { 
    float: none; 
    position: fixed; 
    top: 30px; 
    left: 30px; 
    z-index: 9; 
} 
#main1 div { 
    list-style: none; 
    margin-bottom: 2px; 
    background-color: #7F7F87; 
    padding-left: 30px; 
    width: 230px; 
    cursor: -webkit-grab; 
    color: #fff; 
    font-size: 18px; 
    height: 40px; 
    line-height: 40px; 
    float: left; 
    position: relative; 
    z-index: 10; 
} 
#trash form > div { 
    height: auto; 
    width: 97%; 
    margin-bottom: 2px; 
    background-color: #7F7F87; 
    padding-left: 30px; 
    cursor: -webkit-grab; 
    color: #fff; 
    font-size: 18px; 
    line-height: 40px; 
    position: relative; 
    z-index: 10; 
} 
.highlight { 
    padding: 5px; 
    border: 2px dotted #fff09f; 
    background: #fffef5; 
} 

Answer 1

該問題與z-index屬性無關。您看到此行爲的原因是因爲您在容器#trash和#main元素上設置了overflow: hidden。

如果您希望能夠將元素拖出其容器元素，則應該將overflow屬性設置爲visible（默認值）。因此，您可以簡單地刪除overflow: hidden。

Updated Example

作爲附帶說明，我以包括在他們的寬度/高度計算所述padding/border加入box-sizing: border-box到的元素。我相信您可能已添加overflow: hidden以防止元素擴展到其父元素之外。通過添加box-sizing: border-box，並給出元素寬度100%，這是解決。