Question

我有这个HTML：

 <ul class="logos">
                    <li><a href="deelnemers-details.html" title="ATAG"><img src="content/img/vaste-afbeeldingen/atag.jpg" width="180" height="45" alt="ATAG" /></a>
                        <div class="info">
                            <h2>ATAG</h2>
                            <p>some neat text here </p>
                        </div>
                    </li>
</ul>

在ul中有很多礼物。每个li都有一个标签和一个div类信息。 info div是信息的div。当我将鼠标悬停在<a><img></a>上方时。然后显示<div>信息。

但是现在我对这段代码的问题。我想要总是李项目在顶部。现在当我徘徊在李。信息框出现，其他项目下降。我该如何解决这个问题？

这是CSS：

/* logos */
#deelnemers .logos {
    position            : relative;
    padding             : 12px 0 0;
}

#deelnemers .logos li {
    display             : inline-block;
    position            : relative;
    vertical-align      : top;
}

#deelnemers .logos li a {
    display             : block;
    height              : 120px;
    width               : 180px;
    margin              : 0 30px 0 0;
    padding             : 5px;
    border              : 1px solid #ddd;
    background          : #FFF;
}

#deelnemers .logos li .info {
    width               : 180px;
    margin              : 0 0 15px;
    padding             : 5px;
    border-right        : 1px solid #ddd;
    border-bottom       : 1px solid #ddd;
    border-left         : 1px solid #ddd;
}

Answer 1

您需要为.info元素设置绝对定位，左下角为0px。

CSS for this：

#deelnemers .logos li .info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    ...
}

实时测试案例：http://jsfiddle.net/yahavbr/wgCuF/1/

总是把物品放在最上面

1 个答案: