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
Post a Comment