html - Why is position: fixed not working? -


why position: fixed; not working in following css

body {     text-align : center ;     min-width : 770px ; } div.wrapper {     width : 770px ;     text-align : left ;     margin-left : auto ;     margin-right : auto ; }  div.header {     color: blue;     padding: 15px;     margin: 0px;     text-align: center;     position: fixed; }  div#main {     margin-left: 30%;     margin-top: 1px;     padding: 10px; }  div.footer {     color: blue;     padding: 15px;     margin: 0px;     text-align: center; } 

html:

<body> <div class="wrapper">     <div class="header">         <form action="<?php $_php_self ?>" method="get">             start datum: <input type="text" name="start" pattern="[0-9]{4}"/>             eind datum: <input type="text" name="eind" pattern="[0-9]{4}"/>             <input type="submit" />         </form>     </div>     <hr>      <div class="main">        <div id="donutchart" style="width: 900px; height: 500px;"></div>        <?php            $i=0;            foreach ($rows $row) {                echo '<div id="chart'.$i.'_div" style="width: 900px; height: 500px;"></div>';                $i++;            }        ?>    </div>    <hr>    <div class="footer">        ©2014-<?php echo date("y"); ?> guest    </div> </div> </body> 

ok took little while understand meant "not working" got there in end.

changed css:

div.header {     color: blue;     padding: 15px;     margin: 0px;     text-align: center;     position: fixed;     left: 0; top: 0;     background: #fff;     width: 100%;     border-bottom: 1px solid; } 

so main thing needed sound of z-index, can move header front (setting value z-index: 10;). added width , border make nicer.

demo here


Comments

Popular posts from this blog

windows - Single EXE to Install Python Standalone Executable for Easy Distribution -

c# - Access objects in UserControl from MainWindow in WPF -

javascript - How to name a jQuery function to make a browser's back button work? -