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:

Look here

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

Can somebody teach me what I do wrong?

`z-index` does not work on elements that do not have `position` (position other than static) — random_user_name, Oct 09 '19 at 16:04
Possible duplicate of [Why does z-index not work?](https://stackoverflow.com/questions/9191803/why-does-z-index-not-work) — random_user_name, Oct 09 '19 at 16:06

score 0 · Answer 1 · answered Oct 09 '19 at 15:42

0

Update your button bubble button css with this one:

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

will definetly work

answered Oct 09 '19 at 15:42

Hemant Kumar

83
3

Thanks, Hemant, but I would need the .bubble-container inside my .container { height: 100vh;} not on top. With your code I have the bubble in on top unfortunately..any hint? – CAT Oct 09 '19 at 15:50

score 0 · Answer 2 · answered Oct 14 '19 at 09:05

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>

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

2 Answers2