Question

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

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

我一直在尝试通过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>

Answer 1

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

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

检查更新的小提琴

Demo

位置固定元素

1 个答案: