javascript - 如何在不扩大容器(li)大小的情况下悬停显示div？

Question

我有一个 UL。每个 LI 元素都包含一个图像和一个 div 元素。 div 元素应该被隐藏，并在用户将鼠标悬停在图像上时显示，以显示有关图像的更多信息。我只希望 div 元素覆盖在其他 li 元素之上。

问题是当显示 div 元素时，它会扩展 li 元素的大小并将其他 li 元素推到位。我通过使用 px 将 li 元素的大小指定为特定大小找到了解决方案。但是，我真的不想这样做，因为它不是好的响应式设计。当我使用百分比时，它不起作用，因为显示 div 元素时 UL 元素的大小会增加，因此 li 的大小也会自动增加。

#list {
	list-style:none;
	overflow:initial;
	width:20%;
}
#list li {
	display:inline-block;
	float:left;
	overflow:visible;
}
.additionalInfo {
	position:relative;
	background-color:white;
	top:20px;
	left:40px;
	display:none;
 }
.clearer{
	clear:both;
}

<ul id="list">
<li class="listItem">
	<p>image here.....................</p>
	<div class="additionalInfo">
		<p>additional info</p>
		<p>additonal info</p>
	</div>
</li>
<li class="listItem">
	<p>image here.....................</p>
	<div class="additionalInfo">
		<p>additional info</p>
		<p>additonal info</p>
	</div>
</li>
<li class = ".clearer"></li>

Demo with image substituted with just plain text for simplicity .

Answer 1

你定位错了。首先，您的 additionalInfo div 应该有

position: absolute;

和包含的 li 元素应该有:

position: relative;

这样就可以了。这是更新的 fiddle :https://jsfiddle.net/93pe7hdq/