Question

我一直在查看stackoverflow上的几个线程，但似乎无法使其工作。我发现的是我需要在父div上应用相对位置然后在子文本上应用绝对位置，但这不起作用？我做错了什么？

＆＃13;

.the-image { 
   position: relative;
   border: 1px solid;
    width: auto;

}

.the-h3 { 
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:350px;
}

.the-h3 span { 
   color: #ffffff; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

＆＃13;

<div class="the-image">
    <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
    <h3 class="the-h3"><span>TEST</span></h3>
</div>

＆＃13;

Answer 1

您提供的h3 top属性超出了图片的高度。

只需将该值降低到更适合的值：

.the-image { 
   position: relative;
   border: 1px solid;
    width: auto;

}

.the-h3 { 
    z-index:100;
    position:absolute;    
    color:white;
    font-size:24px;
    font-weight:bold;
    left:150px;
    top:10px;
}

.the-h3 span { 
   color: #ffffff; 
   letter-spacing: -1px;  
   background: rgb(0, 0, 0); /* fallback color */
   background: rgba(0, 0, 0, 0.7);
   padding: 10px; 
}

<div class="the-image">
    <img style="height: 200px" src="http://i.imgur.com/w15Db.jpg"></img>
    <h3 class="the-h3"><span>TEST</span></h3>
</div>

将文本放在图像上方

1 个答案: