-1

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 i.e not directly dependent on the z-index values used on the page.

Shasak
  • 790
  • 8
  • 19

2 Answers2

2

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?

Community
  • 1
  • 1
K K
  • 17,794
  • 4
  • 30
  • 39
  • I think this won't work if there is another fixed element with z-index greater than 1. An example of such a scenario would be bootstrap's fixed nav-bars – Shasak Oct 28 '14 at 12:20
  • You can always change the z-index. I used 1 just for demo purpose. You can set it higher than the maximum z-index in the page. It all depends on your design – K K Oct 28 '14 at 12:21
  • I am looking for a dynamic solution. It should not directly depend on the styles used on the page. It should adapt. – Shasak Oct 28 '14 at 12:24
  • @Kasahs Set z-index :2147483647 . This is the highest value of z-index. Else, write a jquery code which finds the element with highest z-index, increment it by one and add it to concerned element's css. – K K Oct 28 '14 at 12:25
  • I am working on the second option(though i can't use jquery) i was wondering if there was a better solution. Thanks anyway :) – Shasak Oct 28 '14 at 12:29
  • For future readers: I am marking this as the correct answer despite the use of jquery as the link @K K shared contained the required javascript solution(I came up with my own so did not use it but it essentially does what i did so should work.) Thanks K K. – Shasak Oct 28 '14 at 13:02
0

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

Niranth Reddy
  • 493
  • 1
  • 11
  • 27
  • What if there is a fixed element with z-index greater than 999(example scenario will be bootstrap's fixed nav-bar)? I am looking for a dynamic solution. – Shasak Oct 28 '14 at 12:23