CSS 定位图像

Question

我想创建 div，我可以在其中显示多个图像，如下图所示。

我面临的问题是，当我尝试在 img 标签上使用 position:absolute 时，我的外部 div 的 display:flex 破产了。关于如何做到这一点有什么建议吗？

编辑：

<div className={styles.imagePart}>
   <div className={styles.imageDiv}>
       <img src="/main1.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main2.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main3.svg" alt="" />
   </div>
   <div className={styles.imageDiv}>
        <img src="/main4.svg" alt="" />
   </div>
</div>

Css 我试过了：

.imagePart {
  text-align: center;
  display: flex;
}

.imageDiv{
  position: relative;
}

.imageDiv > img {
  width: 5vw;
  height: 20vw;
}

我试图在 img 标签中添加 postion:absolute。但是然后每个 img 都向左移动并相互重叠。

Answer 1

要使用 absolute 定位元素（在您的案例中为图像），您可能需要指定其包装器容器的位置为 relative。这确保 absolute img 元素对齐它们的 absolute top, bottom... 相对于包装器 relative个元素。

简而言之，你可以想象结构如下：

<flex container>
  <relative wrapper>
    <absolute img />
  </relative wrapper>
  <relative wrapper>
    <absolute img />
  </relative wrapper>
  ... other elements ...
</flex container>

下面是一个使用 flex 容器和用 div 元素包裹的绝对图像的示例，这些元素的 position 是 relative。（另请注意，包装 div 应与其子 img 具有相同的宽度）

.container {
  margin-top: 5rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container__img, img {
  width: 5rem;
}

.container__img {
  position: relative;
}

.img1 {
  position: absolute;
  top: -10px;
}

.img2 {
  position: absolute;
  top: 1.7rem;
}

.img3 {
  position: absolute;
  top: 5px;
}

.img4 {
  position: absolute;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flexbox and Absolute</title>
</head>
<body>
  <div class="container">
    <div class="container__img">
      <img class="img1" src="https://post.healthline.com/wp-content/uploads/2020/09/healthy-eating-ingredients-1200x628-facebook-1200x628.jpg" alt="image 1" />
    </div>
    <div class="container__img">
      <img class="img2" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS24wvA9ozipJc5-IStQrqZIo_a3urpEZGIGA&usqp=CAU" alt="image 2" />
    </div>
    <div class="container__img">
      <img class="img3" src="https://www.besthealthmag.ca/wp-content/uploads/2019/07/junk-food-1.gif" alt="image 3" />
    </div>
    <div class="container__img">
      <img class="img4" src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRhdHVJQDoKTWnLuq-pAByiBK0gcu0PGI9WYw&usqp=CAU" alt="image 4" />
    </div>
  </div>
</body>
</html>

Answer 2

嗨，伙计，我不知道这是否正是您想要的，但您可以通过 mask-image 实现该效果：;或剪辑路径，但我确实喜欢这种效果，只是一些简单的属性你可以看到下面的代码：

#HTML
<div class="container">
<div class="img1"></div>
<div class="img2"></div>
<div class="img3"></div>
<div class="img4"></div>
</div>

#CSS
.container{
display:flex;
justify-content:center;
background-color:#333;
padding:3rem;
margin:auto;
}
.img1{background:url("https://upload.wikimedia.org/wikipedia/commons/thumb/1/1c/Image_du_Maroc_3.jpg/800px-Image_du_Maroc_3.jpg") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.5rem;
border-radius: .4em 1.3em 1.5em 1em ;
overflow: hidden;
border-top-width:2px;
transform:skew(10deg,15deg);}

.img2{background:url("https://images.ctfassets.net/cnu0m8re1exe/1mRV2AKcshOa5pHKQ0Pjrb/647a4cc7da3ac5095cfc3202d70b318f/Man_Woman_Weight_Loss.jpg?w=650&h=433&fit=fill") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.2rem;
border-radius:  2em  1.3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew( 10deg,20deg);}

.img3{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSuY1_PAAD0xRobQTyv8WEyDvMaCBKCHBS2GQ&usqp=CAU") no-repeat center center/cover;
width:100px;
box-shadow:1px 3px 10px -5px white;
height:200px;
margin:.6rem;
border-radius: 2em    .5em .3em 2em ;
overflow: hidden;
border-top-width:2px;
transform:skew( 10deg,20deg);}

.img4{background:url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTTKqXNmxNjYkI-iEVj9UhPXAVjsBdnON1NZw&usqp=CAU") no-repeat center center/cover;
width:90px;
height:250px;
margin:.8rem;
border-radius: 2em 3em 1em 1em ;
overflow: hidden;
box-shadow:1px 3px 10px -5px white;
border-top-width:2px;
transform:skew(10deg,15deg);}```
You can see the result of that & play around in codepen :


***I hope That It will Help You Thanks advance good luck***
Mahdi_Soultana[My_CodePen][1]
  [1]: https://codepen.io/mahdi-soultana/pen/rNLNyyp

CSS 定位图像

CSS position images

css

image

css-position