Html 粘性元素，不'；t占用空间（如相对/绝对元素）-CSS

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

我需要这种行为，但带有粘性元素

我希望代码能够解释这一切：

（也戴上）

constmydiv=document.querySelector（“#容器”）；
const tooltip=document.querySelector（“#tooltip”）；
让showTooltip=false；
myDiv.addEventListener（'单击'，（）=>{
showTooltip=！showTooltip；
如果（显示工具提示）{
tooltip.classList.add（'显示'）；
}否则{
tooltip.classList.remove（'显示'）；
}
})

#容器{
身高：19雷姆；
溢出y：滚动；
}
.info{
背景：浅蓝色；
填充：.5rem；
}
#工具提示{
背景：灰色；
位置：粘性；
底部：0；
保证金：0.2rem；
不透明度：0；
填充：1rem；
}
#工具提示。已显示{
不透明度：1；
}

在此div中单击以隐藏/显示工具提示。
Lorem ipsum dolor sit amet，奉献精英。除假设、quos、暂时性透明体、真实体外，还包括静脉和静脉。我要说的是，我要说的是，我不是莫迪·奎布斯丹

Lorem ipsum dolor sit amet，奉献精英。除假设、quos、暂时性透明体、真实体外，还包括静脉和静脉。我要说的是，我要说的是，我不是莫迪·奎布斯丹

Lorem ipsum dolor sit amet，奉献精英。除假设、quos、暂时性透明体、真实体外，还包括静脉和静脉。我要说的是，我要说的是，我不是莫迪·奎布斯丹

Lorem ipsum dolor sit amet，奉献精英。除假设、quos、暂时性透明体、真实体外，还包括静脉和静脉。我要说的是，我要说的是，我不是莫迪·奎布斯丹

此工具提示不应占据其父分区底部的初始空间。。。




但它的空间也被考虑在内。向下滚动查看。。。

我想如果你在

显示：无

及

显示：块

---

而不是不透明。然后，在结尾处被占用的初始空白将不会出现。

您使用的是

不透明度：0
隐藏您的元素

在听起来很酷的地方，元素仍然存在，只是透明而已。想想现实生活中真正抛光的窗户。你可能永远不会承认那扇窗户，但它仍然在那里，占据了空间，如果你不知道，你可能会撞上它，严重伤害自己

更好的办法是暂时摆脱它：

    #tooltip {
  display: none;
}
#tooltip.shown {
  display: block;
}

以下是JSFIDLE的工作原理：

编辑：
我明白你的意思了。我认为您应该重写#container div，因为它们会干扰您的粘性类div

或者。。您可以尝试将粘性类移动到容器后面，如下所示（有效）：

-div容器的末尾
此工具提示不应占据其父分区底部的初始空间。。。




但它的空间是被考虑在内的。向下滚动查看。。。

工作JSFIDLE:
最初，结尾的黑色空间是您不想要的，对吗？@algo_user您是说白色空间，对吗？是的，不，不行。显示工具提示时，仍会考虑其空间。我在问题中链接的JSFIDLE中测试了您的建议，您可以去那里查看。检查这是否几乎有效！它似乎可以工作，但当我在可滚动div中添加更多内容时，它会断开，不再粘性…如果我们从顶部而不是底部获取位置参考。保持显示器的固定，这样看起来就可以工作了。非常感谢，但它仍然不起作用，与algo_用户的回答中的问题相同。当显示工具提示时，它的空间仍然被考虑在内。top:14rem的绝对位置确实起作用，但我想知道它在不同的屏幕尺寸下是否能正常工作。。。将检查您的答案更新。只有当工具提示在可滚动div之外时，更新的答案才有效，但我需要它在里面…用
包装它。abs{position:absolute；bot:0px；}
这就是您的意思吗？这样，工具提示位于内容上方。。。不起作用。
</div> - end of div container

    <div id="tooltip">
        This tooltip should not occupy it's initial space at the bottom of it's parent div... 
        <br><br><br>
        But yet it's space is taken in consideration. Scroll down to see...
      </div>