CSS位置固定和边距0自动
Posted
技术标签:
【中文标题】CSS位置固定和边距0自动【英文标题】：CSS position fixed AND margin 0 auto 【发布时间】：2014-03-31 14:51:43 【问题描述】：所以我有一个带有以下 css 的背景图片：
body
background-image:url(cover.jpg);
background-repeat:no-repeat;
background-position:center;
background-attachment:fixed;
背景图片宽度为 1280 像素。所以我希望我的导航栏固定并以背景为中心。但是我遇到了问题。这是我的代码。
#navigation
margin: 0 auto;
position:fixed;
top: 0;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
但导航栏会固定但不会居中。如果我删除固定的，它将居中但它不固定。
有什么方法可以做到这一点？
【问题讨论】：
Position absolute and margin: auto 的可能重复项 添加 html 的 sn-p 会有所帮助 如何添加 html 帮助？<html> <head> <link rel="stylesheet" type="text/css" href="page.css"> </head> <body> <div id="navigation"> </div> </body> </html>
【参考方案1】：
使用样式创建.container div：
//no float!
width:960px;
possition:relative;
margin:0; //centers
然后用这个容器创建固定的导航栏:)
position:fixed;
float:left;
width:100%;
height:50px;
所以现在导航栏固定在居中的容器中。
您可能需要在此代码上编辑的唯一内容是 top。
【讨论】：
【参考方案2】：Fixed 和 auto 是两个不同的东西，你不能同时称它们。更好的解决方案是制作一个容器 div，使用 margin:0 auto 将其居中，将背景代码从正文添加到它并将其从正文中取出，然后制作另一个 div 并将导航放在那里。您可能还想在该容器 div 上设置高度。
<div class="container">
<div class="nav">
<!-- nav here -->
</div>
</div>
【讨论】：
【参考方案3】：您可以进行以下操作
#navigation
position:fixed;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
width: 1280px;
height: 35px;
padding-top: 10px;
background-color: #000000;
【讨论】：
width:100% 也可以！太赞了。我在其下方相对定位的元素中添加了填充，该元素在执行此操作后折叠起来。【参考方案4】：.fixed-centered
position: fixed;
left: 50%;
transform: translate(-50%);
【讨论】：
以上是关于CSS位置固定和边距0自动的主要内容，如果未能解决你的问题，请参考以下文章
使用绝对位置和边距自动垂直对齐子元素在 FireFox 中失败
位置和边距顶部负值不适用于 html 电子邮件模板 [关闭]