CSS h1 positioning

Question

Я пытаюсь получить текст, который говорит «Тест» внутри белого DIV, рядом с логотипом компаса. Я не уверен, что я делаю неправильно здесь или как обойти это. Вот образ того, что это выглядит как: http://imgur.com/y1Jan8B

Вот мой CSS:

#nav{ 
clear: both; 
margin-top: 20px; 
background-color: #FFF; 
width: 45%; 
height: 75px; 
margin-right: auto; 
margin-left: auto; 
border-radius: 5px; 
-webkit-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
-moz-box-shadow: 0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
box-shadow:   0px 6px 5px 0px rgba(48, 50, 50, 0.46); 
} 
img.logo{ 
margin-top: -15px; 
display: inline; 
} 
h1.title{ 
font-family: 'Lato', sans-serif; 
font-weight: 900; 
font-size: 2.5em; 
color: #FFEA00; 
display: inline; 
} 

и HTML

<div id="nav"> 
    <img class="logo" src="images/compass.png" alt="Compass" /> 
    <h1 class="title">Test</h1> 
</div> 

Заранее спасибо

Answer 1

Чтобы получить изображение появится над h1 , вам просто нужно применить position:absolute; к самому изображению, и затем вы можете удалить ненужный CSS :)

Вот Fiddle его в действии

CSS

Вам просто нужно position:absolute, чтобы текст двигаться под изображением, так как (грубо говоря) position:absoluteremoves the target element from it's position in the semantic flow, расположив ее против его ближайший расположенный предок

img.logo{ 
    /*margin-top: -15px;*/ 
    /*display:inline;*/ 
    position:absolute; 

Вы можете удалить некоторые из ваших других CSS тоже:

h1.title{ 
    font-family: 'Lato', sans-serif; 
    font-weight: 900; 
    font-size: 2.5em; 
    color: red; 
    /*display: inline;*/ 
    /*margin-top: -500px;*/ 
}