CSS position Sticky, Z-Index and abslolute positioning not work...how to fix this?

Question

I have a sticky positioning inside a container on top of everything that does not work. Ideally, the sticky element button should stick on the top of the page after the black break and stick again when the breaks come again.

 * { margin: 0; padding: 0; }.container { display: flex; height: 100vh; background-color: #b19df6; justify-content: center; }.item { align-items: center; z-index: 0; background-color: red; width: 60%; height: 100%; } @media only screen and (max-width:800px) {.item { width: 90%; } } /*bubble-button*/.bubble-container { position: absolute; z-index: 99; }.link-bubble { margin: 20px; }.link-bubble-wrapper.link-bubble { position: sticky; top: 0; margin: 20px; padding: 0.55em 0.85em 0.6em 0.85em; /*button shape*/ background-color: white; /*3F3F41*/ border-radius: 2.1em; font-family: helvetica; text-decoration: none; font-size: 10px } a { text-decoration: none; } /*bubble-button*/.break { height: 300px; width: 100%; background: black; margin: 0; padding: 0; }

 <div class="break"></div> <:-- button-3 start --> <div class="bubble-container"> <div class="link-bubble-wrapper"> <div class="link-bubble"> <a href="https.//www.instagram:com/">Sticky Element</a></div> </div> </div> <.-- button-3 end --> <div class="container"> <video class="item" poster="https.//www.matteogiordano:info/wp-content/uploads/2019/09/2.jpg" playsinline="" autoplay="" muted="" loop=""> <source src="https.//file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> </video> </div> <!-- REMOVE!! --> <div class="break"></div>

If I edit my css .bubble-container the element go above of the container..

.bubble-container {
    position: sticky;
    top: 0;
    z-index: 99;
}

Screenshot:

I would need the .bubble-container on top my .container { height: 100vh;} not above.

Can somebody teach me what I do wrong?

Answer 1

Update your button bubble button css with this one:

.bubble-container {
    position: sticky;
    top: 0;
    z-index: 99;
}

will definetly work

Answer 2

You could switch between absolute and fixed position using Javascript.

 var doc = document.documentElement; var element = document.getElementById("bubble-container"); var container = document.getElementById("container"); window.onscroll = function() { if (doc.scrollTop > 300 && doc.scrollTop < 300 + container.offsetHeight - 50){ element.className = element.className = 'bubble-container-fixed'; } else { element.className = element.className = 'bubble-container'; } }; function vh(v) { var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); return (v * h) / 100; }

 * { margin: 0; padding: 0; }.container { display: flex; height: 100vh; background-color: #b19df6; justify-content: center; }.item { align-items: center; z-index: 0; background-color: red; width: 60%; height: 100%; } @media only screen and (max-width:800px) {.item { width: 90%; } } /*bubble-button*/.bubble-container { position: absolute; top: 310px; left:10px; width:130px; z-index: 99; }.bubble-container-fixed { position: fixed; top: 10px; left:10px; width:130px; z-index: 99; }.link-bubble { margin: 20px; }.link-bubble-wrapper.link-bubble { position: sticky; top:0; margin: 20px; padding: 0.55em 0.85em 0.6em 0.85em; /*button shape*/ background-color: white; /*3F3F41*/ border-radius: 2.1em; font-family: helvetica; text-decoration: none; font-size: 10px } a { text-decoration: none; } /*bubble-button*/.break { height: 300px; width: 100%; background: black; margin: 0; padding: 0; }

 <div class="break"></div> <:-- button-3 start --> <div id="bubble-container" class="bubble-container"> <div class="link-bubble-wrapper"> <div class="link-bubble"> <a href="https.//www.instagram:com/">Sticky Element</a></div> </div> </div> <.-- button-3 end --> <div id="container" class="container"> <video class="item" poster="https.//www.matteogiordano:info/wp-content/uploads/2019/09/2.jpg" playsinline="" autoplay="" muted="" loop=""> <source src="https.//file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4" type="video/mp4"> </video> </div> <!-- REMOVE!! --> <div class="break"></div>