相对于其父级放置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的{​​{1}} div的div

HTML

position: relative

CSS

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

类别为“ inside”的div相对于包装div定位。

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

.wrapper {
    position: relative;
}

.inside {
    position: absolute;
}

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

Answer 2

您将像下面这样将所有类的属性赋予主要部分pic类，而无需使用这种错误的方法。

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

这是正确的方法。

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

.pic {
}
  .shade-container {
    grid-area: pic;
    border: 2px green solid;
    position: relative;
    width: 100vw;
    }
  img {
    z-index: -1;
    width: 100vw;
  }
  .shade {
    background: linear-gradient( rgba(0, 0, 0, 0.5), 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>