问题描述
我有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>
。
1楼
您的定位错误。
首先，你的additionalInfo的div应该有
position: absolute;
并且包含的li元素应具有：
position: relative;
这样就可以了。 这是更新的小提琴： :