Html 将div定位在父级之外

我有一些元素，我想在它们悬停时显示一些附加信息。我曾尝试将我的内容定位在盒子的底部，然后在悬停时将其设置在底部，但根据内容的数量，它有时仍然可见

在下面的示例中，我有一个红色框，我希望黄色框从底部向上设置动画。现在我可以使用一个疯狂的值，比如

bottom:-9999px

，但这会导致动画速度问题，使内容向上滑动

.item{
位置：相对位置；
溢出：隐藏；
背景：红色；
}
.item:悬停.item\u框{
底部：0；
}
.物品箱{
位置：绝对位置；
底部：-100%；
背景：黄色；
过渡：所有300毫秒；
}

lorem ipusm





罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳罗琳

如果指定百分比，可以添加以相对于自身大小移动元素，而不是仅使用相对于父级大小的顶部和底部

通过这种方式，您可以将元素移动到

底部：0

，这是您想要它进入的最终位置（框的底部与项目的底部对齐），然后将其100%向下平移，这意味着框的顶部将位于底部的位置

动画不会发生在

bottom

属性上，而是发生在

transform

上，这意味着您实际上是将长方体顶部从该底线移动到了bottom=0的最终位置

难以解释，易于查看：

.item{
位置：相对位置；
溢出：隐藏；
背景：红色；
}
.物品箱{
底部：0；/*框底部与项目底部对齐*/
/*起始位置：使用“变换”将项目向下移动其位置
自己的高度，所以它只是在可见范围之外*/
转换：翻译（0,100%）；
过渡：所有300毫秒；
位置：绝对位置；
背景：黄色；
}
.item:悬停.item\u框{
/*动画：而不是动画顶部，动画的翻译，所以
它从超出范围向上移动到正常位置*/
变换：平移（0,0）；
}

Lorem ipsum dolor sit amet





知识是一种美德，是一种美德，是一种美德，是一种美德

结束了

如果您只是想在悬停时显示其他内容，您是否考虑过使用手风琴

这可以手动完成，使用javascript、html和css的组合。 或者使用预先制作的库插件，如jQuery UI

---

这可以在

上找到。看一看，有很多很酷的例子，包括您正在寻找的（请参阅“simply，jQuery”）。。加载超过100KB的JavaScript比写3行CSS更简单吗？@GolezTrol，我的意思是他现在可以拥有一个手风琴，而不是滚动。只是提供了一个替代的解决方案。看起来这里的用例是一个带有信息的弹出式提示，比如图片上出现的一些解释。Accordion通常更适用于多页信息，您可以使用Accordion控件选择正确的页面。当然，只要有点创意，你也可以在这里使用它。@GolezTrol这个问题已经编辑过了，原版文章悬停了，它显示了大量的文本和滚动，这就是我建议使用手风琴的原因。现在它已经被编辑了，工具提示/覆盖可能更有用。我没有意识到高度来自父母的高度，这让我很困惑。但不幸的是，我希望黄色框在悬停时粘在底部，而您的框则粘在顶部。如果你从黄色框中删除一个段落，你就会明白我的意思。@SamWillis没有注意到这一点，但这排除了使用

top

的原始解决方案。我已将解决方案更改为使用

translate

而不是

top

。我也试图解释发生了什么，但这个例子可能比解释更清楚太棒了，我从来没有想过要用翻译，谢谢