如何移动包含使用绝对定位定位的图像的整个 <div>？

Question

我知道必须查看 img link 可能很糟糕，但请帮忙。我真的很需要它。

张贴的图片包含我想要实现的目标，但是我希望能够通过命令 <div> 移动整个拼贴画。虽然现在我可以移动图像，但这包括每次我必须在图像拼贴上方添加内容时都必须单独更改绝对定位。此外，图像需要以特定顺序相互堆叠。这是我的代码：

body {
  margin: 0;
}

h1 {
  margin: 0;
  text-align: center;
  color: #dbdbdb;
  font-family: 'Dosis', sans-serif;
  font-size: 4rem;
}

.title-holder {
  background-color: #333333;
  margin: 0;
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.photo-holder {
  height: 60rem;
  background-color: #333333;
}

.pic {
  width: 20%;
  border-radius: 100%;
  position: absolute;
  display: inline-block;
}

.pic:hover {
  z-index: 15;
  width: 22%;
}

.camera {
  right: 24rem;
  top: 30.5rem;
  z-index: 3;
}

.coffee {
  top: 14rem;
  right: 25rem;
  z-index: 7;
}

.flower {
  right: 38rem;
  top: 42rem;
  z-index: 6;
  width: 22rem;
}

.plane {
  top: 25rem;
  right: 40rem;
  z-index: 4;
}

.plane:hover {
  width: 25%;
}

.wing {
  left: 25rem;
  top: 15rem;
  z-index: 5;
}

.bike {
  left: 20rem;
  top: 32rem;
  z-index: 5;
}

<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap" rel="stylesheet">
<section>
    <div class="name-holder">
        <h3>Mohd Yusuf Patrawala</h3>
    </div>
</section>

<div class="title-holder">
    <h1>Those Things that make me fall in Love.</h1>
</div>

<div class="photo-holder">
    <img class="pic bike hvr-grow" src="https://picsum.photos/200" alt="">
    <img class="pic coffee hvr-bounce-in" src="https://picsum.photos/200" alt="">
    <img class="pic flower hvr-bounce-in" src="https://picsum.photos/200" alt="">
    <img class="pic plane hvr-bounce-in" src="https://picsum.photos/200" alt="">
    <img class="pic wing hvr-grow" src="https://picsum.photos/200" alt="">
    <img class="pic camera hvr-grow" src="https://picsum.photos/200" alt="">
</div>
</section>

Answer 1

您可以将所有图像分组在一个 div 中，并使用具有正值和负值的边距，这会有所帮助！

Answer 2

具有 position: absolute 的元素实际上 相对于 具有 position 属性的最后一个祖先元素定位。

因此，以下方法可以解决您的问题：

.photo-holder {
  height: 60rem;
  background-color: #333333;
  position: relative;
  top: 123px;
  left: 456px;
}

Answer 3

您只需提供 .photo-holder div position: relative 样式并相应地定位图像。最初共享的 HTML 代码有一个悬挂的 <section/> 标签。 border-radius 应该是 50% 而不是 100%（但它没有任何明显的区别）。

您现在可以一次移动所有图像，只需使用 .photo-holder[=19= 上的 top 和 left 属性]

以 full-screen 模式打开代码片段以获得更好的可见性。

body { margin: 0; } h1 { margin: 0; text-align: center; color: #dbdbdb; font-family: "Dosis", sans-serif; font-size: 4rem; } .title-holder { background-color: #333333; margin: 0; padding-top: 7rem; padding-bottom: 7rem; } .photo-holder { height: 60rem; position: relative; background-color: #333333; } .pic { width: 25%; cursor: pointer; border-radius: 50%; position: absolute; transform: translate(-50%, -50%); } .pic:hover { z-index: 15; width: 35%; } .camera { left: 65%; top: 65%; z-index: 3; } .coffee { top: 35%; left: 65%; z-index: 7; } .flower { left: 50%; top: 65%; z-index: 6; } .plane { top: 50%; left: 50%; z-index: 4; } .wing { left: 35%; top: 35%; z-index: 5; } .bike { left: 35%; top: 65%; z-index: 5; }

<link href="https://fonts.googleapis.com/css2?family=Dosis:wght@300&display=swap" rel="stylesheet"> <section> <div class="name-holder"> <h3>Mohd Yusuf Patrawala</h3> </div> </section> <div class="title-holder"> <h1>Those Things that make me fall in Love.</h1> </div> <div class="photo-holder"> <img class="pic bike hvr-grow" src="https://picsum.photos/200" alt=""> <img class="pic coffee hvr-bounce-in" src="https://picsum.photos/200" alt=""> <img class="pic flower hvr-bounce-in" src="https://picsum.photos/200" alt=""> <img class="pic plane hvr-bounce-in" src="https://picsum.photos/200" alt=""> <img class="pic wing hvr-grow" src="https://picsum.photos/200" alt=""> <img class="pic camera hvr-grow" src="https://picsum.photos/200" alt=""> </div>

如何移动包含使用绝对定位定位的图像的整个 <div>？

How can I move an entire <div> that contains images that are positioned using absolute positioning?

html

css

positioning

image

absolute