时间戳

首页 > 解决方案 > 相对于其父级定位 div

html - 相对于其父级定位 div

问题描述

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

.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>

结果：

图片

标签： htmlcsssass

解决方案

你会有一个 div 包含position: absolutediv 有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;

'inside' div 内的属性以覆盖它的父级。

推荐阅读