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;
}

Answer 2

我在那里提出了解决方案http://jsfiddle.net/NPh76/

HTML是：

<div class="wrapper">
    <div class="middle">
        <div class="spotlight">
        <img src="http://www.springsource.org/files/header/logo-spring-103x60.png"                 border="0" />
        <div class="spotlight-copy">
            message in spotlight copy
        </div>
    </div>
</div>
<div style="clear: both;"></div>

关于HTML的注意事项：

<IMG>进入.middle与.spotlight-copy处于同一水平

CSS是：

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

.spotlight .wrapper {
 position:absolute;
}

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

.spotlight .spotlight-copy {
 position:absolute;
 top: 0px;
 font-size:15px;
 line-height:25px;
 width:500px;
 color:#FF0000;
}

关于CSS

的通知

position:absolute;

.spotlight-copy
top: 0px;获取职位
color:#FF0000;看到的东西;）

html css样式不起作用

2 个答案: