CSS位置问题,我想把两个图像放在同一个位置

ia2d9nvy 于 2022-12-20 发布在其他

关注(0)|答案(1)|浏览(201)

我想把两个图像放在一起，就像enter image description here和responsive一样，我使用了相对位置，但是每当屏幕变小的时候，它就像enter image description here一样，我想使用两个不同的图像，因为我会分别为它们制作动画。

.img_box{
   width: 100%
}

.desk {
  position: relative;
  width: 90%;
  bottom:-30%;
 
}

.person {
  position: relative;
  width: 90%;
  bottom:20%;
  right: 25%;
}

<div class="img_box">
  <img class="desk" src="https://material.angular.io/assets/img/examples/shiba1.jpg">
  <img class="person" src="https://material.angular.io/assets/img/examples/shiba2.jpg">
</div>

我尝试使用绝对，但我认为它不适用于响应

css

来源：https://stackoverflow.com/questions/74845513/css-position-question-i-want-to-put-two-images-together-on-the-same-position

1条答案

按热度按时间

lyr7nygr1#

我建议创建一个新的stacking context，方法是将position: relative;添加到.img_box Package 器元素中，然后将您使用的任何图像（"层"）绝对定位在新的堆叠上下文中。
例如：

.img_box {
  /* Setting to position: relative creates a new stacking context */
  position: relative;
  width: 100%;
  max-width: 400px;
}

.img_layer {
  /* Positions absolutely each payer inside the .img_box stacking context */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.person {}
.desk {}

<div class="img_box">
  <img class="img_layer desk" src="https://assets.codepen.io/817230/back.gif">
  <img class="img_layer person" src="https://assets.codepen.io/817230/front.gif">
</div>

这样，添加position: absolute;到任何层都会设置它们相对于父层（而不是文档）的位置，您可以根据需要定位/缩放 Package 器元素，所有子层也会相应地跟随。

您仍然可以使用.person和.desk在各自的图层上进行其他样式设置和/或设置z-index等，这就是我保留它们的原因。*

赞(0）回复(0）举报 2022-12-20

我来回答

CSS位置问题,我想把两个图像放在同一个位置

1条答案

相关问题

热门标签

最新问答