CSS позиция Sticky, Z-Index и абсолютное позиционирование не работают ... как это исправить?

Question

У меня липкое расположение внутри контейнера поверх всего, что не работает. В идеале, кнопка «липкий элемент» должна прилипать к верхней части страницы после черного разрыва и вставляться снова, когда снова наступает разрыв.

* {
  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>

Если я отредактирую свой css .bubble-container, элемент перейдет над контейнером ..

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

Снимок экрана:

Мне понадобится .bubble-container поверх моего .container { height: 100vh;} не выше.

Может ли кто-нибудь научить меня, что я делаю неправильно?

Answer 1

Вы можете переключаться между позициями absolute и fixed, используя 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>

Answer 2

Обновите свою кнопку пузыря кнопки css с этим:

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

определенно будет работать