定位固定元素答案

【问题标题】：Position Fixed elements定位固定元素
【发布时间】：2014-09-07 03:07:13
【问题描述】：

我真的被 HTML5 中的一个小问题所困扰。

我只是想定位一个固定元素，我有一个 jpg 作为标题，并且在下面我有一个名为 menu 的 div，其中包含一个导航。

我一直在尝试通过 jss 和许多 css 规则来修复这个 div 菜单，因为当我向下滚动时，我希望在滚动页面的其余部分时该潜水保持在顶部位置。

这是代码，谢谢大家！

//Edit1：我尝试过使用标题 CSS，但这不是重点，我正在尝试覆盖菜单，甚至标题，我找到了一个示例，但我无法成功编辑代码：

http://poselab.com/contenidos/position-fixed/relative-position-fixed.html

<body bgcolor="#FFFFFF">
<div class="wrapper">
    <header>
        <img src="../doc/img/cabecera.png" width="1024" height="170" alt="" />
    </header>http://jsfiddle.net/kesarkes/uJsHL/embedded/result/
    <!--<div class="fijado">-->
    <div class="menu">
        <nav align="center">
            <ul>
                <li id="home1"><a href="index.html">home</a>
                </li>
                <li id="folio2"><a href="#b1">folio</a>
                </li>
                <li id="bio3"><a href="#bioinfo">bio</a>
                </li>
                <li><a href="contact.html" target="_blank">contact</a>
                </li>
            </ul>
        </nav>
    </div>
    <!--</div>-->
    <!--<div id="slideshow"></div>-->
    <div class="slideshow"></div>
    <div class="fotos">
        <hr id="b1"></hr>
        <div class="grupo_foto"><a href="1"><div class="grupo_foto1_1"></div></a>
        </div>
        <div class="grupo_foto2"><a href="1"><div class="grupo_foto2_1"></div></a>
        </div>
        <div class="grupo_foto3"><a href="1"><div class="grupo_foto3_1"></div></a>
        </div>
        <div class="grupo_foto4"><a href="1"><div class="grupo_foto4_1"></div></a>
        </div>
    </div>
    <div id="bioinfo">
        <hr id="b2"></hr>
        <div id="fotokes" title="Hi, it's me!">
            <p>
                <img src="../doc/img/img_kes.png" width="156" height="170" alt="César M.Posada" />
            </p>
        </div>
        <div id="texto">
            <p>Born in 1990 in Madrid, Cesar Martinez is an Informatic Engineer who is currently focused in graphic design, web building, photography, 3D and many other fields about graphic arts. His main work also includes very suitable offers like publicity work, media promo or corporative image. He has a clear and simple style according with new tendencies which is the most important target in his job.</p>
        </div>
    </div>
    <div id="redes">
        <div id="red_twitter" title="Twitter">  <a href="https://twitter.com/_CesarPosada" target="_blank"><div id="red_twitter1">
</div></a>
        </div>
        <div id="red_facebook" title="Facebook">    <a href="https://www.facebook.com/cesar.martinezposada" target="_blank"><div id="red_facebook1"></div></a>  
        </div>
        <div id="red_flickr" title="Flickr">    <a href="https://www.flickr.com/photos/kesdesigns/" target="_blank"><div id="red_flickr1"></div></a>

        </div>
        <div id="red_contact" title="Contact me">   <a href="r" target="_blank"><div id="red_contact1"></div></a>

        </div>
    </div>
</div>

【问题讨论】：

你能展示你的CSS吗？
stackoverflow.com/questions/19158559/…的可能重复

标签： javascript jquery css html

【解决方案1】：

您需要添加，请注意如果您不添加z-index，那么内容将与您的代码重叠。

header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

检查更新的小提琴

Demo

【讨论】：

如果你也想修复菜单项，那么添加固定位置并设置一个 z-index，这样它就不会低于较低的可滚动内容。跨度>