位置固定元素 [英] Position Fixed elements
问题描述
我真的很抱歉在HTML5中的一个小问题。
我只是想定位一个固定的元素，我有一个jpg作为标题，有一个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.pngwidth =1024height =170alt =/>
< / 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>首页< / a>
< / li>
< li id =folio2>< a href =＃b1> folio< / a>
< / li>
< li id =bio3>< a href =＃bioinfo> bio< / a>
< / li>
< li>< a href =contact.htmltarget =_ 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 =fotokestitle =你好，是我！>
< p>
< img src =../ doc / img / img_kes.pngwidth =156height =170alt =CésarM.Posada/>
< / p>
< / div>
< div id =texto>
< p>出生于1990年在马德里，Cesar Martinez是一名信息工程师，目前主要从事平面设计，网页制作，摄影，3D和其他许多关于平面艺术的领域。他的主要工作还包括非常适合的提议，如宣传工作，媒体促销或法人形象。根据新的倾向，他有一个清晰简单的风格，这是他工作中最重要的目标。< / p>
< / div>
< / div>
< div id =redes>
< div id =red_twittertitle =Twitter> < a href =https://twitter.com/_CesarPosadatarget =_ blank>< div id =red_twitter1>
< / div>< / a>
< / div>
< div id =red_facebooktitle =Facebook> < a href =https://www.facebook.com/cesar.martinezposadatarget =_ blank>< div id =red_facebook1>< / div>< / a>
< / div>
< div id =red_flickrtitle =Flickr> < a href =https://www.flickr.com/photos/kesdesigns/target =_ blank>< div id =red_flickr1>< / div>< / a>
< / div>
< div id =red_contacttitle =与我联系> < a href =rtarget =_ blank>< div id =red_contact1>< / div>< / a>
< / div>
< / div>
< / div>
您需要添加，请注意，如果您不添加 z-index ，那么内容将与您的代码重叠。
header {
position：fixed;
top：0;
left：0;
z-index：999;
}
检查更新的小提琴
i am really stucked with a little issue in 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.
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.
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:
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>
You need to add, please beware if you don't add the z-index then the content will overlap the header with your code.
header {
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
Check the the updated fiddle
这篇关于位置固定元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
