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

Question

I wish to display a button at a fixed position(sticky) on the page and it should always be on top of other elements on the page, assuming I have no knowledge of the structure and styles used on that page. The solution can only use Javascript(no jQuery), CSS3 and HTML5.

The solution has to be dynamic/adaptive ie not directly dependent on the z-index values used on the page.

Answer 1

Demo: 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>....

For dynamic z-index using jQuery:

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);

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

Refer: 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>

I hope you got the answer. You can change the position of button where ever you need