html - 尽管更改了 'top' 边距，但内容一半隐藏在固定标题下

Question

我最近更改了标题以保持固定。标题是完美的，但它隐藏了一半的内容。我已尝试更改内容的“顶部”设置，但不会改变结果。

HTML:

<div class="gridContainer clearfix">
  <div id="LayoutDiv1">We are here to help</div>
  <form action="website.php" method="POST">
  <div id="LayoutDiv3">         Names:
           <input type="text" name="user"/>
           Gender<FONT COLOR="#FF0000">*</FONT>
    <select name="Gender[]" double="double">
             <option value="Female">Female</option>
             <option value="Male">Male</option>
    </select>

</div>


<div id="Components"></div>
  <div id="Food"><h1>Dietary conditions:</h1>

  &nbsp;Gluten Free
  <input type="checkbox" name="GlutenFree" value="Yes" />
  <br>
  &nbsp;&nbsp; Diary Free
  <input type="checkbox" name="DairyFree" value="Yes" />
  <br>
  &nbsp;&nbsp; No Softdrink
  <input type="checkbox" name="NoSoftDrink" value="Yes" />
  &nbsp;<br>
  &nbsp;Halal
  <input type="checkbox" name="Halal" value="Yes" />
  &nbsp;<br>
  &nbsp;Vegetarian
  <input type="checkbox" name="Vegetarian" value="Yes" />
  &nbsp;&nbsp; <br>
No Nuts
<input type="checkbox" name="NoNuts" value="Yes" />
  &nbsp; <br>
  Other
<input type="checkbox" name="Other" value="Yes" /></div>

CSS:

#LayoutDiv1 {
    position: fixed;
    height: 75px;
    top: 0;
    width: 100%;
    z-index: 10000;
    background:#FFF
}

#LayoutDiv3 {
    position: fixed;
    height: 30px;
    top: 75px;
    width: 100%;
    z-index: 10002;
    background:#FFF
}

#Components {

top: 2000px; //Has no effect, and either does changing the 'top' setting for each div
              within 'components. 

}

谢谢

Answer 1

您需要将 top: 更改为 margin-top。

#Components {

    margin-top: 120px; 

}

检查这个http://jsfiddle.net/Vj799/

注意:

top 不适用于静态元素。

您可以将 top 与 position: relative|fixed|absolute 一起使用

更多在这里https://developer.mozilla.org/en-US/docs/Web/CSS/top