Css 固定标志的内容

我就是没办法解决这个问题。我需要将我的徽标固定在我的内容一侧，并用它固定顶部导航。我有一个方法，但问题是它没有反应，最终标志重叠的内容。我需要一个解决方案，使这一响应或更好的方式这样做。我创建了一个简单的JSFIDLE来解释目前正在发生的事情。如果你看全屏，红色框代表徽标，重新调整屏幕大小，你会看到我的问题

全屏：

工作：

这是我到目前为止的工作。如果您能提供更好的帮助，我们将不胜感激。我希望这个问题足够清楚，但如果有什么需要澄清，请询问

HTML:

---

包装容器，然后在包装上设置填充物

这就造成了这样一种情况：内容框缩进到徽标的宽度，并且内容位于内容框的中心

<div class="wrapper"><div class="container"></div></div>

.wrapper
{
    padding:0 0 0 158px;
}

为什么不简单地在.container上添加一个边距呢

.fullwidth{width:100%；} .top_标题{位置：固定；顶部：0；右侧：0；背景：8d2890；高度：39px；} .logo{宽度：158px；高度：119px；背景：ff0000；位置：相对；边距：10px 0 10px；} .container{高度：500px；清除：两者；边距：0自动0 170px；最大宽度：1000px；填充：0 10px；背景：000；}

---

这是你想要的吗

.fullwidth{width:100%；} .top_标题{位置：固定；顶部：0；右侧：0；背景：8d2890；高度：39px；} .logo{宽度：158px；高度：119px；背景：ff0000；位置：固定；边距：10px 0；} .container{height:500px；clear:both；margin:0 auto；max width:1000px；padding:0 10px；background:000；}

---

尝试添加顶部：5px；这是迄今为止我找到的最好的解决方案。虽然标志是红色的盒子，但我想让它拥抱内容的黑色盒子，并让标志随着内容向下调整。我的另一个问题是，当屏幕大小变成内容的宽度时，我不确定该怎么办。我想这是一个简单的媒体查询，可以使徽标保持静态并阻止其滚动。如果没有意义，很抱歉，我想我仍在试图在脑海中对其进行排序！我需要它放在容器外面，但随着屏幕的缩小，我会紧紧抓住边缘。我的问题是，当屏幕缩小时，徽标会覆盖容器，这意味着在上下滚动时徽标会覆盖内容？希望这有点道理。。。

.fullwidth {
width:100%;
}
.top_header {
position:fixed;
top:0;
right:0;
background:#8d2890;
height:39px;
}
.logo {
width:158px;
height:119px;
background:#ff0000;
position:relative;
margin: 10px 0 0 10px;
}
.container {
height:1000px;
clear: both;
margin: 0 auto;
max-width: 1000px;
padding: 0 10px;
background:#000;
}

<div class="wrapper"><div class="container"></div></div>

.wrapper
{
    padding:0 0 0 158px;
}