如何在不影响宽度的情况下定位固定[重复]
Posted
技术标签:
【中文标题】如何在不影响宽度的情况下定位固定[重复]【英文标题】：How to position fixed without interfering with the width [duplicate] 【发布时间】：2013-10-28 07:21:44 【问题描述】：想知道如何将我的#header 定位固定而不让它变宽。
我多次检查了我的代码，但似乎无法弄清楚是什么干扰了我的标题宽度。由于某种原因，它变得更宽并向下跳跃，而我之前给了它 70% 的宽度，以后不要在任何地方改变宽度。
如何将我的标题位置固定为正确的宽度：70% 并且不让它向下跳？ 还有比我现在拥有的正确方法或更好的方法让我的“我的名字”和我的导航在#header中彼此相邻吗？ #header 左侧是我的名字，右侧是导航栏。
html5：
<body>
<section id="Header" class="group">
<header>
<h2><a href="http://www.epicforever.com">My Name</a></h2>
</header>
<nav class="main">
<ul class="group">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</section>
<section id="TopContainer" class="group">
<p>Welcome to my Portfolio</p>
<p>Webdevelopment is my passion and I'd love to design and develop a website for you
sometime!</p>
<div class="block1">
<header><h2>Brand</2></header>
</div>
<div class="block2">
<header><h2>Web</h2></header>
</div>
<div class="block3">
<header><h2>Design</h2></header>
</div>
<aside><p>See all projects<a href="#">// brand // web // print</a></p></aside>
</section>
CSS3：
html
width: 100%;
body
background-image: url("img/bg.png");
font-family: arial, 'Lucida Sans Unicode';
font-size: 87.5%;
line-height: 15px;
color: #000305;
#Header, #TopContainer, #MidContainer, #AboutContainer, #ContactContainer
width: 70%;
margin: 0 auto;
#Header
padding: 0 10% 0 10%;
background-color: #fff;
margin-top: -8px;
position: fixed;
#Header header h2
padding-top: 13px;
#Header nav
text-align: right;
#Header nav ul li
list-style: none;
display: inline-block;
padding: 5px;
#TopContainer
height: 150px;
padding: 0 10% 10% 10%;
background-color: #fff;
margin-top: 90px; /* change this at the end*/
【问题讨论】：
我还没有找到解决方案，但是给 body 一个 1px 的边框可以解决问题。 我把css改成：#Header header h2 position: absolute;边距顶部：4px； #标题导航 文本对齐：右；位置：相对；但我想知道这是否是正确的处理方式。 【参考方案1】：所以在花了 10 分钟之后，我看到你在给它一个固定位置之后没有在 #header 中指定顶部位置。
所以你的css应该是
#Header
padding: 0 10% 0 10%;
background-color: #fff;
margin-top: -8px;
position: fixed;
top:0px;
这是小提琴 http://jsfiddle.net/mW5aS/1/
编辑： // 使标题和导航并排
你可以使用浮动属性。
#Header header
padding-top: 13px;
float:left;
width:55%;
#Header nav
text-align: right;
float:right;
width:40%;
这是小提琴http://jsfiddle.net/mW5aS/2/
【讨论】：
感谢您的回答。但是，我希望右侧标题旁边的导航。我想在#header 和顶部的body 之间留出一些空间。我已经想通了 top:0px; ，但这会将#header粘贴到正文的顶部。我还希望导航与标题位于同一行。希望这能澄清一些事情。看看这个标题，，这是我想要重现的：ruthkelly.me @Brain 要并排获得它，您可以使用 float 属性并将 #header 向左浮动和 nav 向右...这是小提琴 jsfiddle.net/mW5aS/2 。让我知道这是否有帮助 Hey Ghost，我正在尝试使用 float 属性来完成它。但是是的，你是对的，在这种情况下，浮动属性确实是并排的。但是，如果我添加一个位置：固定到我的#header，整个#header 都会搞砸。它跳下来，变得更宽。它把我的整个身体推了一点。这就是我所拥有的并且需要让它与 position:fixed;#Header padding: 0 10% 0 10%; background-color: #fff; #Header header h2 position: absolute; margin-top: 4px; #Header nav text-align: right; position: relative;
@Brain.. 你看到小提琴了吗（jsfiddle.net/mW5aS/2）。我添加了 position:fixed 到 #header 和 float 属性，标题似乎在正确的位置
Ghost，我复制/粘贴了您的代码，但它对我不起作用。我不希望标题粘在页面顶部。我想在页面顶部和我的#header 之间留一些空间。我试图在没有浮动属性的情况下实现这一点。固定位置正在工作，但#header 比预期的要宽。注意我的 css: html width: 100%;高度：100%； body 背景图片： url("img/bg.png"); font-family: arial, 'Lucida Sans Unicode';字体大小：87.5%；行高：15px；颜色：#000305；宽度：90%；高度：100%；保证金：1% 自动； 以上是关于如何在不影响宽度的情况下定位固定[重复]的主要内容，如果未能解决你的问题，请参考以下文章
如何在不影响其兄弟位置的情况下将 div 绝对定位在弹性框中？ [复制]
如何在不影响长度较小的数据的情况下减少html css中冗长数据的宽度？
如何在不影响未分阶段更改的情况下丢弃 git 中的分阶段更改 [重复]