我真的被 HTML5 的一个小问题困扰了。
我只是想定位一个固定元素,我有一个 jpg 作为标题,在下面我有一个名为 menu 的 div,其中包含导航。
我一直在尝试通过 jss 和许多 css 规则使这个 div 菜单固定,因为当我向下滚动时,我希望该 div 保持在顶部位置,而页面的其余部分滚动。
这是代码,谢谢大家!
//Edit1:我尝试过使用标题CSS,但这不是重点,我试图覆盖菜单,甚至标题,我找到了一个示例,但我无法成功编辑代码:
http://poselab.com/contenidos/position-fixed/relative-position-fixed.html http://poselab.com/contenidos/position-fixed/relative-position-fixed.html
JSFiddle 链接 http://jsfiddle.net/kesarkes/uJsHL/
<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>
需要添加,不添加请注意z-index
那么内容将与您的代码重叠标题。
header {
position: fixed;
top: 0;
left: 0;
z-index: 999;
}
检查更新的小提琴
Demo http://jsfiddle.net/uJsHL/2/
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)