绝对位置“顶部：0像素”的问题

Question

我一直试图在顶部放置一些标签：某些div的0px。

我的问题是，当我放置“ top：0px”时，它没有将我放置在父div的顶部。

我一直在搜索有关此的一些信息，这似乎是一个“崩溃保证金”问题。.

我已经尝试过自己修复它，但是如果不保留主结构（主类居中。宽度为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具有“相对”位置，否则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>