刪除按鈕隱藏在另一個元素后面。 如何使該元素位於頂部，以便可見？

Question

我正在嘗試在可折疊框的右上角繪制一個刪除按鈕。 我已經做過，但是由於某種原因我無法使其顯示在可折疊元素的頂部，因此它是可見的。 我嘗試將其設置為visibility: visible但仍然無法使其可見。 任何想法或建議，將不勝感激。

這是我的HTML代碼：

<div data-role='main' class='ui-content' id='collapse'>
    <div data-role='collapsible' data-theme='b' data-content-theme='b' data-iconpos='right' data-expanded-icon='collapse' data-collapsed-icon='expand'>
        <h4> 
            <a href='#' data-rel='back' data-role='button' data-icon='delete' data-iconpos='notext' style='position:absolute;top:-20px;right: -10px'>Close</a> 

            <div class='ui-grid-a'> <div class='ui-block-a textfloatleft' > 1 new </div>

            <div class='ui-block-b textfloatright'>January 6th 2016</div>
        </div>

        <span id='collapstxt'> first </span> 

        <button href='#' id='bt01' data-icon='check' data-iconpos='right' style='width:100px;' onclick='alert(1);event.stopPropagation();' >Reply</button>
        </h4>

        <ul data-role='listview'>
            <li id='answerstyle'><span id='answerstxt'> first </span>
                <div class='ui-block-b answrfloatright'>January 6th 2016</div>
            </li>
            <li id='answerstyle'>Audi</li>
            <li id='answerstyle'>BMW</li>
            <li id='answerstyle'>Cadillac</li>
            <li id='answerstyle'>Ferrari</li>
        </ul>
    </div>
</div>

還有我的jsfiddle 示例

Answer 1

要獲得想要的效果，您需要添加overflow: visible; 到包含元素：

a.ui-collapsible-heading-toggle.ui-btn.ui-icon-expand.ui-btn-icon-right.ui-btn-b { overflow:visible;}

這是JS小提琴