javascript - How to render an element on top of every other element on page without depending on the structure/styles used in the page? -


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

The solution should be dynamic / adaptive i.e. should not be directly dependent on the Z-indicator values ​​used on the page.

demo:

CSS:

< Pre> .a {status: fixed; Correct: 10px; // Optional Top: 10px; // Optional z-index: 1; Background: Gray; // Optional Color: # 000; // Optional padding: 20px; // Optional}

HTML:

  & lt; Div & gt; - content - & lt; / Div & gt; & Lt; Div class = "a" & gt; Fixed & lt; / Div & gt; // Fixed Div & lt; Div & gt; - content - & lt; / Div & gt; ....  

Using jQuery for dynamic z-pointer:

  highest = -999; $ ("*") Each (function () {var current = pert ($ (this). Css ("z-index"), 10); if (current & amp; highest; current) supreme = current;}); $ ('Your-element-selector') CSS ('z-index', highest).  

Using Javascript:

Refer:


Comments

Popular posts from this blog

java - Can't add JTree to JPanel of a JInternalFrame -

javascript - data.match(var) not working it seems -

javascript - How can I pause a jQuery .each() loop, while waiting for user input? -