CODEWITHSUNDEEP
javascriptjquerycsshtml
César Martínez
César Martínez

Reputation: 1

Position Fixed elements

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

JSFiddle Link

<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>

Upvotes: 0

Views: 407

Answers (1)

Harry
Harry

Reputation: 3195

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

Demo

Upvotes: 1

Related Questions