David David - 6 months ago 150
HTML Question

display: relative error: invalid property value when width and height of parent are set

I'm trying to make my h2 text "hover" above my images but I'm not sure what I'm doing wrong. Developer Tools in chrome says that the display: relative is an invalid property value and I'm not sure why. I'm setting my h2 text as absolute and setting top/left at 0px but the text is still underneath the image. Please help.

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

You want position: absolute; and position: relative; not display: absolute; and display: relative;.

You are applying values for the position property to the display property.