javascript - 如何在不依赖于页面中使用的结构/样式的情况下将元素呈现在页面上所有其他元素之上？

Question

我希望在页面上的固定位置(粘性)显示一个按钮，并且它应该始终位于页面上其他元素的顶部，假设我不了解该页面上使用的结构和样式。该解决方案只能使用 Javascript(不能使用 jQuery)、CSS3 和 HTML5。

解决方案必须是动态/自适应的，即不直接依赖于页面上使用的 z-index 值。

Answer 1

演示:http://jsfiddle.net/lotusgodkk/sf1fukm5/

CSS:

.a {
    position:fixed;
    right:10px;   //optional
    top:10px;    //optional
    z-index:1;
    background:grey; //optional
    color:#000;   //optional
    padding:20px;  //optional
}

HTML:

<div>--Content--</div>
<div class="a">Fixed</div> //Fixed div
<div>--Content--</div>....

对于使用 jQuery 的动态 z-index:

var highest = -999;
$("*").each(function () {
    var current = parseInt($(this).css("z-index"), 10);
    if (current && highest < current) highest = current;
});
$('your-element-selector').css('z-index',highest);

使用javascript: How can you figure out the highest z-index in your document?

引用:How to find the highest z-index within a document no matter what tags they are?