风格标题继续推动缩略图

Question

我正在研究bootstrap博客风格..所以我每行都有三个缩略图。 缩略图包含图像，h3文本和p文本（描述）

<div class="col-sm-4 col-lg-4 col-md-4">
<div class="thumbnail">
<img src="xxx" alt="xxx">
<div class="caption">
<p class="text-muted"> <i style="font-size:1.2em;" class="glyphicon glyphicon-pencil"> </i> xxx <i style="font-size:1.2em;" class="glyphicon glyphicon-time"></i> xxx</p>
<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>
<p>xxx</p>
<a href="http://localhost/blog/Article.php?id=xxx" class="btn btn-primary btn-sm">إقرأ المزيد →</a>
<a href="#" class="btn btn-default btn-sm disabled">شاهده xxx</a>
</div>
</div>

xxx是php代码

和我的标题css代码

<h3><a title="xxx" href="http://localhost/blog/Article.php?id=xxx">xxx</a></h3>

是

    a:hover {
    position: relative;
}

a[title]:hover:after {
    content: attr(title);
    padding: 4px 8px;
    color: #333;
    position: relative;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 20px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

所以没有悬停链接（之前）：

并在悬停h3标题后，灰色框显示成功，但它推动了底部缩略图...我尝试用位置修复它：绝对缩略图但不起作用（后）：

Answer 1

我的猜测是:after应该position: absolute将其从元素堆栈中抛出。