Question

为什么position: fixed;无法在以下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 as $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>

Answer 1

好的，花了一点时间才明白你的意思＆＃34;没有工作＆＃34;但我们最终到达那里。

更改了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;
}

所以你需要的主要内容是z-index，这可以将标题移到前面（设置值z-index: 10;）。我还添加了宽度和边框，使其看起来更好。

DEMO HERE

为什么位置：固定不起作用？

1 个答案:

更改了CSS：