位置固定元素

Question

i am really stucked with a little issue in HTML5. 我真的在HTML5中遇到了一个小问题。

I am just trying to positionate a fixed element, I have a jpg as a header and inmediately below I have a div called menu which contains inside a nav. 我只是想定位一个固定的元素，我有一个jpg作为标题，在中间下面有一个称为div的div，它包含在导航栏中。

I have been trying through jss and many css rules make this div menu fixed because of when I scroll down I want that dive to stay in top position while rest of page is scrolled. 我一直在尝试通过jss，许多CSS规则使此div菜单固定，因为当我向下滚动时，我希望该下潜在滚动页面的其余部分时保持在最高位置。

Here is the code, thank you all! 这是代码，谢谢大家！

//Edit1:I've tried with header CSS but that's not the point, I'm trying to overlay menu, over even header, I found an example if it but i cant edit code succesfully: // Edit1：我尝试使用标头CSS，但这不是重点，我试图覆盖菜单，甚至在标头上，我找到了一个示例，但它无法成功编辑代码：

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

JSFiddle Link JSFiddle链接

<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

You need to add, please beware if you don't add the z-index then the content will overlap the header with your code. 您需要添加，请注意，如果您不添加z-index那么内容将与代码重叠在标头上。

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

Check the the updated fiddle 检查更新的小提琴

Demo 演示

位置固定元素

问题描述

1 个解决方案

解决方案1
1 2014-07-16 14:27:16

位置固定元素

问题描述

1 个解决方案

解决方案1 1 2014-07-16 14:27:16

解决方案1
1 2014-07-16 14:27:16