Question

我正在尝试创建一个主div上面有固定div的页面。主div应低于固定div，但它与固定div重叠。

添加margin-top将主div放在固定div下面，但是它也会从页面底部剪掉相同的数量。

我做错了什么？

FormView

body {
  background-color: #00FFFF;
}
.fixed {
  width: 100%;
  position: fixed; 
  background-color: #C0C0C0;
}
.main {
  background-color: #FFFFFF;
}
.expand {
  height: 800px;
}

<div class="fixed">
  fixed div line 1<br />
  fixed div line 2<br />
  fixed div line 3<br />
</div>
<div class="main">
  <div class="expand"></div> <!-- For demo purposes only -->
</div>

Answer 1

你需要一个主要div的上边距，其值大于你的固定div高度所以如果你的固定div是60px高做一个margin-top：62px为主div你也可以摆脱margin-left和正确并做所有利润，如此保证金：60px auto;如果60px在主div的底部对你不利，你可以做保证金：60px auto 0px auto;

希望这会有所帮助 - 约瑟夫·约瑟夫·比索特

Answer 2

有一个很好的答案，约书亚K的curtsey。

我将定义一个名为no-js的类（可以是任何类名），用于设置＆＃39; fixed＆＃39;的位置。 div到亲戚。这将使＆＃34;固定＆＃34;在主要div之上的div - 虽然没有实际固定到位。然后使用JavaScript我将div设置为position：fixed并将主div的margin-top设置为＆＃34; fixed＆＃34;的高度。加上5或6像素的软糖因子。

如果启用JavaScript，那么＆＃34;固定＆＃34; div实际上是固定的，主div的margin-top将向下移动以显示整个div。

如果未启用JavaScript，则＆＃34;已修复＆＃34; div仍然可见，并且在主div之上，但它将与页面一起滚动。

我可以将答案标记为最佳答案吗？如果是这样，怎么样？

停止按下;

我可以设置＆＃34;固定＆＃34;的位置。 div到relative（在CSS类中或在元素上使用stye =）并使用JavaScript将其更改为fixed并相应地设置主div的margin-top。我认为，这样就不需要另一个名为no-js的类了。

我创建了另一个页面，其中包含完成任务所需的更改。它位于http://thetesting.site/fixeddiv/fixedheader-fixed.html

Answer 3

你只需要在主div中添加margin-top，它等于固定div的高度。例如，如果你有一个24px高的固定div：

#fixed-div {
    position: fixed;
    height: 24px;
}

#main-div {
    margin-top: 24px;
}

Answer 4

尝试在顶部div添加“position：relative”。

<div style="width: 100%; opacity: .6; position: fixed; margin-left: auto; margin-right: auto;  background-color: #C0C0C0; position: relative;">
    fixed div line 1<br />
    fixed div line 2<br />
    fixed div line 3<br />
</div>

修复了页面顶部的div

4 个答案: