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

尽管改变了“顶部”边距，但内容仍隐藏在固定标题下方

1 个答案: