css - CSS h1定位

我试图在指南针徽标旁边的白色DIV中获取显示“ Test”的文本。我不确定我在做什么错或如何解决此问题。这是它的外观图像：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>

提前致谢

最佳答案

要使图像显示在h1上方，您只需将position:absolute;应用于图像本身，然后可以删除一些不必要的CSS :)

这是它的Fiddle

的CSS

您只需要position:absolute允许文本在图像下方移动，就像（宽松地说）position:absolute removes 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;*/
}