0

画像内にテキストを配置しようとしていますが、テキスト 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>
4

2 に答える 2

1 
.spotlight .wrapper {
    position:absolute;
    top: 0;
}
于 2013-09-04T22:49:02.507 に答える
0

私はそこに解決策を置きました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;何かを見るために;）
于 2013-09-04T22:53:39.620 に答える