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

Question

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

发布的图片包含我想要实现的目标，但是我希望能够通过命令<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

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

您现在只需在.photo-holder 上使用top 和left 属性即可一次移动所有图像

以全屏模式打开代码 sn-p 以获得更好的可见性。

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>

Answer 2

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

Answer 3

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

因此，以下将解决您的问题：

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