Как выровнять с 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 } 

Теперь я вставить рекламу блока с нижеприведенным кодом с текстом обруча.

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

В настоящее время мой стиль названия - это операционная система в моем блоке рекламы. как это решить?

Вот jsFiddle: http://jsfiddle.net/f025d5Lh/

Answer 1

Простейшим является добавление z-index:-999; к .title-1, это надавите в relative 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 
}