Jquery 徽标浮动在标题上方或上方

我正在尝试使用HTML和CSS自定义应用程序的标题。我目前正在使用jqueryui进行布局。我想做的是让徽标更好地适合我的web应用程序。从现在起，徽标与文本内联，并自动调整标题的大小，这是我不想要的。我想有其单独的实体，漂浮在（或以上）标题的标志。我认为它在CSS中是可行的，但不太确定如何实现

<div class="ui-layout-north">
    <div class="container">
        <a href="#"><img class="logo" src="images/cal_fire_logo.gif"></a>
        Hi
    </div>
</div>

如果你们中有人能帮忙，那就太好了。

---

谢谢。

在您的徽标CSS上，您已经声明了两次您的边距。最后一个边距设置将覆盖第一个边距设置。不知道你说的是什么意思，它消失在你的中央面板下。我已经在JSFIDLE上用一个通用的150 x 100徽标图片重新创建了您的代码，并且您的代码只使用了第一个

边距：0 50%。这里有一个链接
让我知道你希望它是什么样子，而不是它的外观
一个实际的演示会使这更容易。查看jsFiddle或CodePen。您最好将容器设置为
position:relative
，将徽标设置为
position:absolute
。我真的不知道如何更好地重新创建我的情况，因为我无法在JSFIDLE中重新创建整个应用程序。我认为分享一个屏幕截图最好。基本上一半的标志（相对位置）消失在我的中心面板下。我想标志浮动以上
嗨就是这样。我还必须向JQuery布局UI添加一行JS脚本：“myLayout.allowOverflow（'north'）；这就是为什么我的徽标隐藏在标题旁边的面板后面。谢谢。不用担心。总是很乐意帮助：）
 .ui-layout-north {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: #f6f6f6;
    z-index: 10000;
    height: 100px;
}

.ui-layout-north .logo {
    line-height: 100px;
}

.logo {
    position: absolute;
    margin: 0 50%;
    width: 150px;
    left: -75px;
    top: 50px;
    display: inline-block;
    height: 100px;
    z-index: 100000;
    margin: 0 auto;
}