时间戳

首页 > 解决方案 > 固定的css位置正在占用另一个div的边距

html - 固定的css位置正在占用另一个div的边距

问题描述

body {
  background-color:whitesmoke
}

.fixed {
  background-color:gray;
  position: fixed;
}
<body>
  <div class="fixed">
    <h1>header data</h1>
  </div>
    <div style="margin-top: 60px;">
      <h1>hello how are you</h1>
  </div>
</body>

我有这个代码在我的身体和身体内部的第一个 div 有固定的位置，但它开始于从顶部给出的边距 60，这是在第二个 div 中给出的。由于固定位置始终相对于文档占据位置，那么为什么它占据第二个 div 的边距。

标签： htmlcss

解决方案

只需指定固定div的位置，否则会（错误地）推断。添加top: 0会将固定的 div 设置为屏幕顶部。

 <div style=" position: fixed; background-color: aqua; top: 0;">
     <h1 >header data</h1>
 </div>
 <div style="background-color: aliceblue;">
     <div style="margin-top: 60px;">
         <h1>hello how are you</h1>
     </div>
 </div>

编辑 如文档中所述（粗体添加）：

该元素会从正常的文档流中移除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块定位，除非其祖先之一的变换、透视或过滤器属性设置为非 [...]

正如CBroe指出的那样，对于边距折叠：

如果没有边框、内边距、内联内容、高度或最小高度来将块的上边距与其下边距分开，则其上边距和下边距折叠。

您可以看到这两个片段之间的区别：第一个创建一个包含固定元素的非空 1px 块，而另一个创建一个空块，导致边距折叠。

<div style="display: block; height: 1px;">
<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 </div>
 <div style="margin-top: 60px; background-color: aliceblue;">
     <h1>hello how are you</h1>
 </div>

另一种解决方案是使用padding而不是margin，以避免崩溃触发：

<div style="display: block; height: 0px;">
<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 </div>
 <div style="margin-top: 60px; background-color: aliceblue;">
     <h1>hello how are you</h1>
 </div>

<div style=" position: fixed; background-color: aqua;">
     <h1 >header data</h1>
 </div>
 <div style=" padding-top: 60px;">
     <div style="background-color: aliceblue;">
         <h1>hello how are you</h1>
     </div>
 </div>

推荐阅读