"top: 0px" 的绝对位置问题

Question

我一直在尝试在顶部放置一些标签：一些 divs 的 0px。

我的问题是，当我放置 "top: 0px" 时，它没有将我放在 parent div.

的顶部

我一直在搜索有关此的一些信息，这似乎是一个 "Collapsing Margin" 问题..

我试过自己修复它，但如果不保持主要结构（主要 class 居中.. header 宽度为 100%.. 等等，我无法修复它。 )

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50%;
  background-color: grey;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

.topzone {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 950px;
}

.inside-main {
  background-color: white;
  width: 100%;
  height: 375px;
}

.inside-title {
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content div {
  position: relative;
  width: 30%;
  margin: 0px 10px 0px 10px;
}

.inside-content img {
  width: 100%;
}

.inside-content div h3 {
  position: absolute;
  top: 0px;
  width: 100%;
}

<header>
  <div>
    <button id="login">1</button>
    <button id="signin">2</button>
  </div>
</header>

<div class="topzone">
  <h1>TOP ZONE TITLE</h1>
</div>

<div class="main">
  <div class="inside-main">
    <div class="inside-title">
      <h1>INSIDE TITLE ZONE</h1>
    </div>
    <div class="inside-content">
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 1</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 2</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 3</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 4</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 5</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 6</h3>
      </div>
    </div>
  </div>

在此示例中，Box1、Box2 等。应与每个框的顶线高度相同。

谢谢

Answer 1

您需要确保要添加的 div 绝对定位项的位置为 "relative"，否则 div 将与其下一个最接近的父项相关即相对定位。这通常是正文。

Answer 2

因为 H3 有默认的 top 和 bottom 边距。我刚刚在 H3 css 中添加了 margin: 0 并更新了您的代码。我希望它能帮助你。谢谢

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 50%;
  background-color: grey;
  position: fixed;
  top: 0px;
  width: 100%;
  height: 50px;
  z-index: 1000;
}

.topzone {
  margin-top: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main {
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 950px;
}

.inside-main {
  background-color: white;
  width: 100%;
  height: 375px;
}

.inside-title {
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  width: 75%;
  margin: 0 auto;
}

.inside-content div {
  position: relative;
  width: 30%;
  margin: 0px 10px 0px 10px;
}

.inside-content img {
  width: 100%;
}

.inside-content div h3 {
  position: absolute;
  top: 0px;
  margin: 0;
  width: 100%;
}

<header>
  <div>
    <button id="login">1</button>
    <button id="signin">2</button>
  </div>
</header>

<div class="topzone">
  <h1>TOP ZONE TITLE</h1>
</div>

<div class="main">
  <div class="inside-main">
    <div class="inside-title">
      <h1>INSIDE TITLE ZONE</h1>
    </div>
    <div class="inside-content">
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 1</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 2</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 3</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 4</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 5</h3>
      </div>
      <div>
        <img src="https://etc.usf.edu/clipart/21900/21988/square_21988_md.gif" alt="Just a box">
        <h3>Box 6</h3>
      </div>
    </div>
  </div>

"top: 0px" 的绝对位置问题

Problems with "top: 0px" on absolute position

html

css

layout

position

margin