HTML/CSS Z :index Position:Relative Question

Question

我有一个包含很多行的表格。

我想在行上产生悬停效果。当有人将鼠标悬停在一行上时，会显示一个弹出式 div，其中包含有关该行的一些附加信息。

我计划使用 div 并在悬停时使 div 可见/不可见。

现在我的问题是 html/css。

如何制作带有悬停时出现但不影响表格外观的 div 的表格。

我在想 z 索引，与位置相关。但我无法让它工作。

Answer 1

你应该使用position:abolute;顶部:10px；左:20px； z-index: 1 用于 div 和 position: relative 用于 tr。 (顶部和左侧只是假设。使用这些来定位 div 相对于您的行)

相对定位行，将其保存在上下文中。绝对定位 div 使其位置相对于其父级(此处为行)是绝对的。如果该行没有 relative，则 div 将绝对定位到 body 或已设置 position 的父元素。