浮动的缩略图库，在悬停时带有额外的缩略图内容。如何让悬停的缩略图重叠邻居？

Question

我有一个缩略图图片库。下面的每个图像，我显示缩略图标题：

<div class='gallery'> 
    <div class='thumb'> 
    <div class='thumbimage'></div> 
    <div class='thumbtitle'></div> 
    </div> 
    <div class='thumb'> 
    <div class='thumbimage'></div> 
    <div class='thumbtitle'></div> 
    </div> 
</div> 

缩略图左浮动，在网格中：

.thumb { 
    float: left; 
} 

的thumbtitles被缩短，以适应在同一行：

.thumbtitle { 
    line-height: 1.25em; 
    min-height: 1.25em; 
    overflow: hidden; 
    text-overflow: ellipsis; 
    white-space: nowrap; 
} 

当用户悬停在缩略图上时，缩略图的缩略图被替换为完整的缩略图：

.thumb:hover .thumbtitle { 
    height: auto; 
    line-height: 1.25em; 
    white-space: normal; 
} 

如果全部缩略图不适合放在一行上，则缩略图框会向下扩展以容纳完整标题。

这里是我的问题：

当悬停的缩略图向下扩张，低于转变缩略图右侧摆脱它的方式。这不是我想要的行为。我希望展开后的缩略图重叠，而不是推开下方的缩略图。也就是说，我希望悬停的缩略图向下展开，而不会导致任何其他缩略图移动。

这可能吗？

Answer 1

你可以以从文档的流动中删除添加

.thumbtitle { 
    position:absolute; 
} 

，并

.thumb { 
    position:relative; 
} 

相对位置.thumbtitle到.thumb。

这种方式，您还可以添加

.thumbtitle { 
    max-width:100%; /* or width:100% */ 
} 

最后，添加

.thumb:hover .thumbtitle { 
    z-index:1; 
} 

，使其重叠以下元素。

演示：http://jsfiddle.net/ANvvR/