HTML/CSS Logo 放置问题

Question

我想知道是否有人可以帮助我解决我遇到的这个(可能很简单的)问题。 我想要做的是将我的 Logo 放在我网站的左侧，但将其放在两个 div 上方，这两个 div 包含顶部的社交媒体链接和另一个 div 中的网站菜单(右对齐)。我在这里提供了我想要实现的目标的图像:http://i59.tinypic.com/155j7tt.jpg (蓝色图像是 Logo 的形状以及我希望它在 div 上方看起来的样子)

我正在使用 getskeleton 框架以防万一。

目前前两个div的代码如下:

    <div class="bars social">
      <div class="container">
        <div class="sixteen columns right">
            <img src="_img/social/facebook.png" alt="Facebook"> <img src="_img/social/twitter.png" alt="Twitter"> <img src="_img/social/youtube.png" alt="Youtube">
        </div>
      </div>
    </div>

    <div class="container">
      <div class="sixteen columns right">
        <ul>
          <li><a href="#">Home</a></li>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
        </ul>
      </div>
    </div>

现在我的问题是在哪里/如何放置我的代码，以便 Logo 可以 float 在这两个 div 上方(并且也悬卡在它们下方一点，如图所示)。

我所做的一切要么将其置于其中一个之上，要么将其置于另一个之上，但不会同时置于两者之上。

更新:

全屏版的CSS如下:

.container { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .sixteen.columns { width: 940px; }
.bars {backgound-color:#FFF;}
.right {text-align:right;}
.bars.social {background-color:#101116; color:#FFF; height:29px; padding-top:4px; border-bottom:2px solid #063;}

Answer 1

这是一种使用绝对定位添加 Logo 的方法，可将其向上推到社交媒体链接的顶部。当然，替换为您自己的 Logo 。

http://jsfiddle.net/bzoc9vbj/

#logo {
    width:64px;
    height:64px;
    position: absolute;
    top:0;
    left:0;
    background-image:url('https://asciinema.org/assets/bitcoin-logo-48563026498d25219c7e2ec2b978184b.png');
}