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

laik7k3q 于 2023-01-14 发布在其他

关注(0)|答案(1)|浏览(106)

这里我有一个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>

css

来源：https://stackoverflow.com/questions/75088647/header-position-offset-not-following-top-margin-of-container

1条答案

按热度按时间

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>

赞(0）回复(0）举报 2023-01-14

我来回答

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

1条答案

相关问题

热门标签

最新问答