html - 如何与css对齐

Question

我想以独特的风格显示我的字幕。所以我们使用下面的css代码来做样式

.title-1 {
    border-bottom: 1px solid #4db2ec;
    margin-bottom: 10px;
    padding-bottom: 4px;
    position: relative;
    font-size: 16px !important;
    color: #FFF }

.title-1 > span { 
    background: #4db2ec;
    width: auto;
    padding: 4px 7px }

现在我要插入带有换行文本的 html 代码的广告 block 。

<div style="float: right; margin-left: 20px;"> 
    <img src="http://domain.com/ad.jpg" height="600" width="160">
</div>
<h2 class="title-1"><span id="location">My Sub Title</span></h2>

现在我的标题样式在我的广告 block 中重叠。如何解决？

这是一个 jsFiddle:http://jsfiddle.net/f025d5Lh/

Answer 1

最简单的是将 z-index:-999; 添加到 .title-1，这将下推相对 div 低于任何 div

Demo

CSS

.title-1 {
    border-bottom:1px solid #4db2ec;
    margin-bottom:10px;
    padding-bottom:4px;
    position:relative;
    font-size:16px !important;
    z-index:-999;  /* only change */
    color:#FFF
}
.title-1 > span {
    background:#4db2ec;
    width:auto;
    padding:4px 7px
}