不占用空间的粘性元素（如相对/绝对元素） - CSS

Question

绝对或相对定位的元素不会占据文档中的初始空间，因此其他元素的行为就好像它不存在一样。

我需要这种行为，但需要一个粘性元素。

我希望代码能解释一切：

（ JSFiddle上也有）

const myDiv = document.querySelector('#container');
const tooltip = document.querySelector('#tooltip');
let showTooltip = false;
myDiv.addEventListener('click', () => {
    showTooltip = !showTooltip;
  if (showTooltip) {
    tooltip.classList.add('shown');
  } else {
    tooltip.classList.remove('shown');
  }
})

#container {
  height: 19rem;
  overflow-y: scroll;
}
.info {
  background: lightblue;
  padding: .5rem;
}

#tooltip {
  background: gray;
  position: sticky;
  bottom: 0;
  margin: 0 2rem;
  opacity: 0;
  padding: 1rem;
}
#tooltip.shown {
  opacity: 1;
}

<div id="container">
  <div class="content info">
    Click in this div to hide/show the tooltip.
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex assumenda, quos, perspiciatis temporibus asperiores, corporis rerum veritatis veniam enim rem repellat doloribus a. Asperiores, perferendis voluptatem, quis non modi quibusdam!</p>
  </div>
  
  <div id="tooltip">
    This tooltip should not occupy its initial space at the bottom of its parent div... 
    <br><br><br>
    But yet its space is taken into consideration. Scroll down to see...
  </div>
</div>

注意：按照答案中的建议使用“显示”而不是“位置”也不起作用。它确实可以防止工具提示在不显示时占用空间，但在显示时仍会考虑其空间......

Answer 1

我想如果你在之间切换

显示：无；

和

显示：块；

而不是不透明度。那么末尾被占用的初始空白就不会出现。