绝对位置和响应网格

Question

我想在网格单元格内给一些图像绝对位置。当我对图像使用绝对位置并为其父级（这是一个网格单元格）使用相对位置时，父级宽度变为零，因此图像消失。我可以通过将 min-width:100% 赋予图像父容器来修复它，但是当我减小浏览器的宽度并且网格变为 1 列时，我给父容器的背景消失了。我的问题是我可以用更好的方式修复它吗？这是我想用这段代码做什么的图片 enter image description here 这是 codepen 中的代码： enter link description here

代码在这里：提前致谢

.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/pen/qBpzPRX

重要的一点是：

你对图像使用 position: relative
然后你玩他们的最高值和左边值
您对这些顶部和左侧值使用相对单位，例如 %
我发现向 .composition 添加一些填充很有用，不过可能还有其他方法可以达到相同的结果
向图像添加 margin-bottom 帮助我解决了某些视口的布局问题

CSS

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

绝对位置和响应网格

absolute position and responsive grid

css

grid

positioning

css-position

responsive-design