如何在其他元素上面添加一个按钮

Question

我遇到了boostrap按钮的问题，我希望按钮显示在hr行的顶部，并且填充类似于右侧的“已安装的驱动器”文本。

解决此问题的适当方法是什么？我已经尝试过使用Z-index，图像仍在线下。

我试过使用但是没有用

   z-index: 10 !important;

这是我的HTML代码供您参考。

http://jsfiddle.net/8ktzhjw3/

Answer 1

fixed仅适用于职位absolute，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"> <strong id="STRONG_3">Mounted Drives</strong> </h6> <button type="button" id="BUTTON_4"> Add Domain </button> </div>：

＆＃13;

＆＃13;

@Order

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;