Question

我想知道是否有人可以帮助我解决这个问题（可能很简单）。我想要做的是将我的徽标放在我网站的左侧，但将其放在两个div之上，其中包含顶部的社交媒体链接和另一个div中的网站菜单（右侧对齐）。我提供了一个我想在这里实现的图像：http://i59.tinypic.com/155j7tt.jpg（蓝色图像是徽标的形状，我希望它看起来也超过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>

现在我的问题是我在哪里/如何放置我的代码，以便徽标可以漂浮在这两个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

这是一种使用绝对定位添加徽标的方法，以便将其推到社交媒体链接之上。当然，用你自己的标志代替。

<强> 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');
}

HTML / CSS徽标放置问题

1 个答案: