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

问题描述

我知道必须查看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>

解决方法

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

, 实际上，具有position: absolute的

元素相对于具有position属性的最后一个祖先元素 relative 。

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

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

,

您所需要做的就是赋予.photo-holder div position: relative样式并相应地放置图像。 最初共享的HTML代码具有一个悬挂的<section/>标签。 border-radius应该是50％而不是100％（但这不会产生任何明显的区别）。

您现在只能通过在top

上使用 left和.photo-holder属性来一次移动所有图像

以全屏模式打开代码段，以提高可视性。

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>