固定导航栏答案

【问题标题】：Fixed Navigation bar固定导航栏
【发布时间】：2023-04-01 10:39:01
【问题描述】：

我有一个导航栏，我想保持固定并居中。我的栏目前居中，但是当我添加“位置：固定”时，它将我的导航栏一直移动到屏幕的左侧。我的导航栏目前距离屏幕顶部大约 20%（居中）。

CSS：

div.social-wrap{
width: 500px;
margin: 0 auto 0 auto;
padding-top: 25px;
}

HTML：

<div class="social-wrap">
        <ul>
            <li><a href="index.html" class="link_home shadow extend">Home</a>
            </li>
            <li><a href="about.html" class="link_identity shadow extend">Identity</a>
            </li>
            <li><a href="books.html" class="link_books shadow extend">Books</a>
            </li>
            <li><a href="contact.html" class="link_contact shadow extend">Contact</a>
            </li>
            <li><a href="https://twitter.com/Christdentity" class="link_twitter shadow extend" target="_blank">Twitter</a>
            </li>
        </ul>
</div>

这里是 jsfiddle：

http://jsfiddle.net/Sederu/uPZuu/

【问题讨论】：

保持固定是什么意思？固定宽度？
对不起，这是位置。因此，当您滚动时它不会向上移动，而是保持原位。

标签： html css uinavigationbar center css-position

【解决方案1】：

您的<div> 在使用固定定位时正在移动，因为默认情况下its taken out of the document flow 相对于其最近的定位祖先（静态除外）.. 在您的情况下，如果您不这样做，那可能是根<html> 元素'您的导航栏没有任何其他定位的祖先。如果它移动到视口的左上角，这是有道理的。

您基本上需要将 left 属性设置为 50% 以居中，还需要将 margin-left 设置为 div 宽度的负一半以将中心移向 div 的中间。

例子：

div.social-wrap{
width: 500px;
position: fixed;
left: 50%;
margin-left: -250px;
padding-top: 25px;
}

【讨论】：

修复了它，但它把导航栏一直移动到屏幕底部并塞进了左角。
我明白了..请提供jsFiddle，以便我可以更好地帮助您..
你只是把属性弄混了，这是一个工作小提琴：jsfiddle.net/uPZuu/2
谢谢！做到了。我很感激你决心让我解决这个问题！