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

为什么不在margin-left上添加.container？

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

将代码段设为全屏并调整其大小。

根据我的理解，您希望徽标位于内容容器内但是使用标题修复？

固定徽标到内容

3 个答案: