绝对位置和响应性网格

Question

我想在网格单元格内给出一些图像的绝对位置。当我使用绝对位置作为图像的绝对位置和父母的相对位置（这是网格单元）时，父宽度变为零，以便图像消失。我可以将其定为最小的宽度：100％到图像父容器，但是当我降低浏览器的宽度并且网格变成1列时，我给父母的背景消失了。我的问题是我可以更好地修复它吗？ 这是我想对此代码做的图像在这里输入图像描述 Codepen中的代码： 在此处输入链接说明

并在此处进行代码：谢谢

.section-about{
  padding:2rem;
  background:gray;
}
.grid-2-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  justify-items: center; 
}
.section-about__text{
  background-color:green
}
.composition {
  position: relative;
  min-width: 100%;
  background-color:red}
.composition__photo {
    background-color: yellow;
    width: 30%;
    position: absolute;
}
.composition__photo--p1 {
      top: 0.5rem;
      left: 0.5rem;
}

<section class="section-about">
  <div class="grid-2-col">
    <div class="section-about__text">
      <p class="paragraph">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quam
              impedit laudantium autem itaque eligendi asperiores aspernatur
              quisquam nesciunt modi, nemo aliquam. Saepe molestiae numquam
              vitae eveniet autem laborum voluptas maxime.
      </p>
    </div>
    <div class="composition">
      <img
       class="composition__photo composition__photo--p1"
       src=""https://images.unsplash.com/photo-1475669698648-2f144fcaaeb1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80""
         />

    </div>
  </div>
</section>

Answer 1

这样的事情呢？
https://codepen.io/panchroma/penchroma/pen/pen/pen/qbpz

​​prx

• 使用位置：图像的相对
• ，然后您使用它们的顶部和左值
• ，您使用这些顶部和左值的相对单元，例如，
• 我发现添加一些填充的填充物很有用，可能还有其他方法可以实现相同的方法结果虽然
• 底

在图像中添加保证

.section-about{
  padding:2rem;
  background:gray;
}
.grid-2-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
  justify-items: center; 
}
.section-about__text{
  background-color:green
}
.composition {
  position: relative;
/*   min-width: 100%; */
  background-color:red;
  padding:5% 0 10%;
}
.composition__photo {
    background-color: yellow;
    width: 30%;
/*     position: absolute; */
  position: relative;
  margin-bottom:30px;
}
.composition__photo--p1 {
  top: 5%;
  left: 5%;
}

.composition__photo--p2 {
  top: 15%;
  left: 5%;
}

.composition__photo--p3 {
  top: 45%;
  left: -45%;
}