display:relative error:设置父级的宽度和高度时的无效属性值

Question

我试图让我的h2文字"悬停"在我的图像之上,但我不确定我做错了什么.chrome中的开发人员工具说显示:relative是无效的属性值,我不知道为什么.我将h2文本设置为绝对值,并将顶部/左侧设置为0px,但文本仍位于图像下方.请帮忙.

HTML

<div class="cta-wrapper">
    <div class="cta">
        <img src="Photos/mypedal.png">
        <a href="Products/productroom.php"><h2>Product Room</h2></a>
    </div>
    <div class="cta">
        <img src="Photos/signup.png">
        <a href="Users/createaccount.php"><h2>Sign Up</h2></a>
    </div>
    <div class="cta">
        <img src="Photos/features.png">
        <a href=""><h2>Features</h2></a>
    </div>
</div>

CSS

.cta-wrapper {
    width: 960px;
    margin: 0 auto;
    margin-top: 80px;
}

.cta {
    display: relative;
    float: left;
    width: 200px;
    height: 200px;
    margin: 0px 60px;
}

.cta a {
    display: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.cta h2 {
    display: absolute;
    text-decoration: none;
    color: #BBBBBB;
}

.cta img {
    top: 0px;
    left: 0px;
}

Answer 1

你想要position: absolute;而position: relative; 不是 display: absolute;和display: relative;.

您正在将该position属性的值应用于该display属性.