html css 样式不起作用

Question

我试图在图像中放置一些文本，但文本 div 并未出现在图像上方，而是隐藏在图像下方且不可见。提前致谢!

这是 jsfiddle 的链接: http://jsfiddle.net/XrXZj/1/

在我的 CSS 文件中包含以下内容:

.spotlight {
     color:#FFFFFF;
     display:table;
     height:120px;
     margin-bottom:15px;
     margin-left:0px;
     overflow:hidden;
     padding:0 50px;
     position:relative;
     width:840px;
}

.spotlight .wrapper {
     position:absolute;
}

.spotlight .middle {
      display:table-cell;
      height:50px;
      vertical-align:middle;
 }

.spotlight .spotlight-copy {
     font-size:15px;
     line-height:25px;
     width:500px;
}

这里是html文件的内容:

 <div class="spotlight">
 <img src="<spring:url value="/assets/img/banner-natural-hazard-risk.jpg"/>"                 border="0" />
 <div class="wrapper">
        <div class="middle">
            <div class="spotlight-copy">
                <spring:message code="content.location.title" />
            </div>
        </div>
    </div>
    <div style="clear: both;"></div>
  </div>

Answer 1

.spotlight .wrapper {
    position:absolute;
    top: 0;
}