html - 相对于其父级定位一个 div

Question

我试图在图像顶部放置阴影以使图像更暗，唯一的问题是我似乎无法将阴影类定位在图像顶部，我似乎无法启动它在图像的左上角，而不是从整个屏幕的左上角开始。

.pic {
  .shade-container {
    grid-area: pic;
    border: 2px green solid;
    }
  img {
    z-index: -1;
    width: 100vw;
  }
  .shade {
    background: rgba(0, 0, 0, 0.5);
    width: 100vw;
    height: 100px;
    position: absolute;
    top: 0;
    left: 0;
  }
}

  <section class="pic">
    <div class="shade-container">
      <img src="images/self.jpg" alt="Picture of me">
      <div class="shade"></div>
    </div>
    <p>Freelance Java Developer</p>
    <p><a href="https://github.com/Realmm">Portfolio</a></p>
  </section>

结果:

Answer 1

您将拥有一个包含 position: absolute 的 div，该 div 具有 position: relative

HTML

<div class="wrapper">
    <div class="inside">
    </div>
</div>

CSS

.wrapper {
    position: relative;
}

.inside {
    position: absolute;
}

具有“内部”类的 div 将相对于包装器 div 定位。

在您的情况下，您还可以使用

left: 0;
right: 0;
top: 0;
bottom: 0;

“内部”div 内的属性以覆盖其父级。