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?

Answer 2

JSFIDDLE

CSS：

.fixed-button {   
      width: 125px; 
      background: #FFFFFF;
      border-style: solid;
      border-width: 1px;
      border-radius: 3px;
      padding: 5px;
      margin-left: 0px;
      position: fixed;
      z-index: 999;
      top: 70px;
  }

HTML：

<button class="fixed-button"> fixed-button </button>

我希望你能得到答案。您可以根据需要更改按钮的位置

如何在页面上的每个其他元素上呈现元素，而不依赖于页面中使用的结构/样式？

2 个答案: