将徽标固定到内容

Question

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

全屏：https://jsfiddle.net/7dycmyv0/embedded/result/

工作：https://jsfiddle.net/7dycmyv0/

这是我到目前为止的工作。任何有助于更好地执行此操作的方法将不胜感激。我希望这个问题足够清楚，但如果有任何问题需要澄清，请提问！

HTML:

<div class="fullwidth top_header">
<div class="top_header_wrapper"></div>
<div class="logo"></div>
</div>
<div class="container"></div>

CSS:

.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;
}

Answer 1

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

这会导致您的内容框缩进徽标的宽度，并且内容在内容框内居中。

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

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

https://jsfiddle.net/7dycmyv0/1/

Answer 2

为什么不直接在 .container 上添加一个 margin-left？

.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:500px; clear: both; margin: 0 auto 0 170px; max-width: 1000px; padding: 0 10px; background:#000; }

<div class="fullwidth top_header">
    <div class="top_header_wrapper"></div>
    <div class="logo"></div>
</div>
<div class="container"></div>

Answer 3

这是你想要的吗？

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

<div class="fullwidth top_header">
    <div class="top_header_wrapper"></div>
</div>
<div class="container">
    <div class="logo"></div>
</div>

将片段全屏显示并调整大小。

据我所知，您希望徽标位于内容容器内，但与页眉固定在一起？

将徽标固定到内容

Fixed logo to content

css

responsive-design