css 标题位置偏移不跟随容器的上边距

laik7k3q  于 2023-01-14  发布在  其他
关注(0)|答案(1)|浏览(105)

这里我有一个position: fixed的头文件,因为它不符合窗口的正常流程,所以主体的边距被设置为头文件的高度(这里是100 px),现在,主体正好从头文件的底部开始。
主体中的主div有一个50 px的margin-top。但是,头部抓住了这个边距,它没有显示。如果我在主体上设置一个边框,那么边距就会显示。我不知道顶部边距和主体边框的关系是什么。
如果我在主div的margin-top上再加50 px,这个问题就可以解决了。但是我想知道这里发生了什么。

body {
  background-color: white;
  margin-top: 100px;
  /* border: 1px solid black;  */
}

header {
  background-color: black;
  height: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

main {
  background-color: gray;
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}
<header></header>
<main></main>
piv4azn7

piv4azn71#

添加边框会调整布局的显示,因为<body><main>的边距重叠 * 没有 * 边框(因为它只是空白),但 * 有 * 呈现的边框,两个边距必须分开。因此,没有边框时,总边距为100px,有边框时,总边距为150px。
看下面的演示。(我还添加了一个按钮来隐藏<header>,因为它的位置是固定的,所以它与情况无关。

const body = document.querySelector("body");
const header = document.querySelector("header");

const a = document.createElement("div");
const b1 = document.createElement("button");
b1.textContent = "Toggle body border";
b1.addEventListener("click", () => {
  if (body.style.border !== "1px solid red") {
    body.style.border = "1px solid red";
  } else {
    body.style.border = "none";
  }
});
const b2 = document.createElement("button");
b2.textContent = "Toggle body margin";
b2.addEventListener("click", () => {
  if (body.style.marginTop !== "0px") {
    body.style.marginTop = "0px";
  } else {
    body.style.marginTop = "100px";
  }
});
const b3 = document.createElement("button");
b3.textContent = "Toggle header visibility";
b3.addEventListener("click", () => {
  if (header.style.display !== "none") {
    header.style.display = "none";
  } else {
    header.style.display = "block";
  }
});
a.appendChild(b1);
a.appendChild(b2);
a.appendChild(b3);
a.style.position = "fixed";
a.style.top = "0";
a.style.zIndex = "2";

document.body.appendChild(a);
body {
  background-color: white;
  margin-top: 100px;
}

header {
  background-color: black;
  height: 100px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
}

main {
  background-color: gray;
  margin-top: 50px;
  width: 100%;
  height: 100vh;
}
<header></header>
<main></main>

相关问题