如何在其他元素上帶一個按鈕

Question

我遇到了boostrap按鈕的問題，我希望按鈕出現在hr行的頂部，並在右側顯示類似於「已安裝的驅動器」文本的填充。

什麼是解決這一問題的適當方法？我已經嘗試過使用Z-index，但圖像依然存在。

我曾嘗試使用，但沒有奏效

z-index: 10 !important; 

這是給你參考我的HTML代碼。僅在位置relative，fixed，absolute

http://jsfiddle.net/8ktzhjw3/

Answer 1

z-index作品。 z-index必須有一個元素才能工作。一個解決辦法是增加position: relative;到您的按鈕，#BUTTON_4：

#DIV_1 { 
 
    background-color: #212121; 
 
    bottom: 0px; 
 
    box-sizing: border-box; 
 
    color: rgb(92, 92, 92); 
 
    height: 38px; 
 
    left: 0px; 
 
    position: relative; 
 
    right: 0px; 
 
    text-align: left; 
 
    text-size-adjust: 100%; 
 
    text-transform: uppercase; 
 
    top: 0px; 
 
    width: 750px; 
 
    column-rule-color: rgb(92, 92, 92); 
 
    perspective-origin: 375px 19px; 
 
    transform-origin: 375px 19px; 
 
    border: 0px none rgb(92, 92, 92); 
 
    font: normal normal normal normal 12px/20px -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; 
 
    margin: 30px 0px 10px; 
 
    outline: rgb(92, 92, 92) none 0px; 
 
} 
 
/*#DIV_1*/ 
 

 
#DIV_1:before { 
 
    bottom: 18px; 
 
    box-sizing: border-box; 
 
    color: rgb(92, 92, 92); 
 
    content: '""'; 
 
    display: block; 
 
    height: 1px; 
 
    left: 0px; 
 
    position: absolute; 
 
    right: 0px; 
 
    text-align: left; 
 
    text-size-adjust: 100%; 
 
    text-transform: uppercase; 
 
    top: 19px; 
 
    width: 750px; 
 
    column-rule-color: rgb(92, 92, 92); 
 
    perspective-origin: 375px 0.5px; 
 
    transform-origin: 375px 0.5px; 
 
    background: rgb(56, 56, 56) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(92, 92, 92); 
 
    font: normal normal normal normal 12px/20px -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; 
 
    outline: rgb(92, 92, 92) none 0px; 
 
} 
 
/*#DIV_1:before*/ 
 

 
#H6_2 { 
 
    bottom: 0px; 
 
    box-sizing: border-box; 
 
    color: rgb(92, 92, 92); 
 
    display: inline-block; 
 
    height: 19px; 
 
    left: 0px; 
 
    position: relative; 
 
    right: 0px; 
 
    text-align: left; 
 
    text-size-adjust: 100%; 
 
    text-transform: uppercase; 
 
    top: 0px; 
 
    vertical-align: middle; 
 
    width: 121.562px; 
 
    z-index: 2; 
 
    column-rule-color: rgb(92, 92, 92); 
 
    perspective-origin: 60.7812px 9.5px; 
 
    transform-origin: 60.7812px 9.5px; 
 
    background: rgb(33, 33, 33) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 0px none rgb(92, 92, 92); 
 
    font: normal normal 500 normal 12px/19.2px -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; 
 
    margin: 9.5px 0px; 
 
    outline: rgb(92, 92, 92) none 0px; 
 
    padding: 0px 12px 0px 0px; 
 
} 
 
/*#H6_2*/ 
 

 
#STRONG_3 { 
 
    box-sizing: border-box; 
 
    color: rgb(92, 92, 92); 
 
    text-align: left; 
 
    text-size-adjust: 100%; 
 
    text-transform: uppercase; 
 
    column-rule-color: rgb(92, 92, 92); 
 
    border: 0px none rgb(92, 92, 92); 
 
    font: normal normal bold normal 12px/19.2px -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; 
 
    outline: rgb(92, 92, 92) none 0px; 
 
} 
 
/*#STRONG_3*/ 
 

 
#BUTTON_4 { 
 
    color: rgb(255, 255, 255); 
 
    cursor: pointer; 
 
    display: block; 
 
    float: right; 
 
    height: 33px; 
 
    min-height: 0px; 
 
    text-size-adjust: 100%; 
 
    touch-action: manipulation; 
 
    vertical-align: middle; 
 
    white-space: nowrap; 
 
    width: 98.2656px; 
 
    z-index: 0; 
 
    column-rule-color: rgb(255, 255, 255); 
 
    perspective-origin: 49.125px 16.5px; 
 
    transform-origin: 49.125px 16.5px; 
 
    user-select: none; 
 
    background: rgb(44, 151, 222) none repeat scroll 0% 0%/auto padding-box border-box; 
 
    border: 1px solid rgb(33, 138, 208); 
 
    border-radius: 2px 2px 2px 2px; 
 
    font: normal normal normal normal 13px/19.8714px -apple-system, "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-serif; 
 
    outline: rgb(255, 255, 255) none 0px; 
 
    padding: 6px 12px; 
 
    position: relative; 
 
} 
 
/*#BUTTON_4*/

<div id="DIV_1"> 
 
    <h6 id="H6_2"> 
 
\t <strong id="STRONG_3">Mounted Drives</strong> 
 
    </h6> 
 
    <button type="button" id="BUTTON_4"> 
 
    Add Domain 
 
    </button> 
 
</div>