Grid行高不自动调整问题：position:relative+top致logo被遮挡

我是Web开发新手，目前遇到一个布局问题：页面的header是Grid行，包含四列，第一列用于展示logo。为了调整logo位置，我给img设置了position:relative并添加top属性，但此时logo被遮挡，Grid行高并未自动调整；而使用margin-top则能正常让行高适配。想请教该问题的原因，以及如何实现使用top时行高也能自动调整。

注：设置四列是为了后续页面需求，当前仅用到部分列

相关代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Grid Test</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <div class="wrapper">
      <header>
        <div class="sz logo">
            <img src="logo.png" alt="Logo" />
        </div>
        <nav class="sz">
          <li>Team</li>
          <li>About Us</li>
          <li>Courses</li>
        </nav>
        <div class="sz btn">
          Start a project
        </div>
      </header>
      <main>hi lorem1000
      </main>
      <footer>hiii</footer>
    </div>
  </body>
</html>

styles.css #

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .wrapper
  {
    display: grid;
    grid-template-areas: 
    "hd hd hd hd"
    "main main main main"
    "ft ft ft ft";
  }
  header {
    grid-area: hd;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    grid-template-rows: auto;
    grid-gap: 10px;
    grid-template-areas: 
    "logo nav nav prjct";
    background-color: aqua;
  }

  .logo {
    grid-area: logo;
    overflow: hidden;
    background-color: hotpink;
  }
  img {
    position: relative;
    height: 82px;
    left: 117px;
    top: 53px;
    /* margin-top: 53px; */
    height: 82px;
  }
  nav {
    grid-area: nav;
    background-color:lemonchiffon;

  }
  li{
    list-style: none;
    text-decoration: none;
    cursor: pointer;
  }
  .btn
  {
    grid-area: prjct;
    background-color: lightcoral;
    font-size: 16px;
    font-weight: 500;
  }
 
  
  main{
    grid-area: main;
    background-color: bisque;
  }
  footer{
    grid-area: ft;
    background-color: antiquewhite;
  }

效果对比 #

• 使用top:53px：logo被下方内容遮挡，header行高未随logo下移而增加
• 使用margin-top:53px：header行高自动适配，logo正常显示不被遮挡

问题原因 #

position: relative是相对自身原位置偏移，但元素原本占据的空间不会改变。也就是说，img设置top:53px后，只是视觉上往下移动了，但它在Grid布局里的占位还是原来的大小，header的行高是根据子元素的占位高度计算的，自然不会调整。而margin-top是改变元素的外边距，属于盒模型的一部分，会直接影响元素的占位空间，所以header的行高会跟着适配。

另外你的.logo容器设置了overflow: hidden，这就导致下移的img超出容器部分被裁剪，同时header行高没变化，所以看起来像是被下方main内容遮挡了。

解决方法 #

方案1：给img容器补充空间 #

既然relative偏移不改变占位，那就主动给.logo容器设置足够的空间，让下移后的img能完全显示，同时让header行高跟着容器高度调整：

.logo {
  grid-area: logo;
  overflow: visible; /* 去掉hidden，避免裁剪 */
  background-color: hotpink;
  /* 设置最小高度为img高度加上top偏移值 */
  min-height: calc(82px + 53px);
}
img {
  position: relative;
  height: 82px;
  left: 117px;
  top: 53px;
}

方案2：用布局属性替代relative调整位置 #

其实没必要用relative，直接利用Grid或Flex的布局属性更合理，完全不会有占位问题：

.logo {
  grid-area: logo;
  background-color: hotpink;
  /* 用Flex实现内部img的定位 */
  display: flex;
  align-items: flex-end; /* 垂直方向靠下 */
  padding-left: 117px; /* 替代left的水平偏移 */
}
img {
  height: 82px;
  /* 若需要底部间距可添加margin-bottom */
}

这种方式既实现了位置调整，又能让header行高自动适配容器内容，是更符合布局规范的做法。

内容的提问来源于stack exchange，提问作者Achiyant