css 悬停伪定位问题 class

Question

我正在尝试设计一个简单的页面来练习 html 和 css。我为羊角面包图像使用了悬停伪 class。它可以工作，但是当我将鼠标悬停在羊角面包上时，咖啡杯图像会向右移动一点（大约 50 或 100 像素），当我将鼠标悬停在羊角面包上时，咖啡杯会回到原来的位置。同时我是网页设计的新手，刚开始学习几天。这是我的代码：

body {
  margin: 0px;
  background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
  background-size: cover;
}

#img1 {
  background-repeat: no-repeat;
  width: 100%;
  height: 40%;
}

#instagram1 {
  width: 20px;
  height: 20px;
  float: left;
}

#instagram2 {
  width: 20px;
  height: 20px;
  position: relative;
  right: 168px;
  top: 5px;
}

#bakery {
  color: black;
  float: left;
  position: relative;
  bottom: 15px;
  left: 5px;
}

#cafe {
  color: black;
  float: left;
  position: relative;
  right: 75px;
  bottom: 10px;
}

div {
  width: 200px;
  height: 60px;
  float: right;
  position: relative;
  top: 550px;
  background-color: #b3d9ff;
}

#croissant {
  width: 200px;
  height: 100px;
  position: relative;
  left: 1100px;
  top: 250px;
}

#espresso {
  position: relative;
  top: 280px;
  right: 150px;
  width: 200px;
  height: 150px;
}

#croissant:hover {
  width: 250px;
  height: 150px;
}

<img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">

<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">

<div>
  <img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="bakery"> @red.bakery </p>
  </br>
  </br>
  <img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="cafe"> @red.cafe </p>
</div>

Answer 1

详情：

relative
...
如果你给它一些其他的定位属性，比如 top: 10px;，它会将它的位置从正常位置向下移动 10 个像素。
...
absolute
...
使用定位属性 top、left、bottom 和 right 来设置位置。请记住，这些值将相对于具有相对（或绝对）定位的下一个父元素。如果没有这样的父级，它将默认一直返回到元素本身，这意味着它将相对于页面本身放置
...

Muhammad Zaib有答案，有演示：

body {
  margin: 0px;
  background-image: url('https://c8.alamy.com/comp/2BT68F1/vector-black-chalkboard-style-hand-drawn-bakery-horizontal-border-pattern-suitable-for-bread-packaging-cafe-menu-design-and-wallpaper-2BT68F1.jpg');
  background-size: cover;
}

#img1 {
  background-repeat: no-repeat;
  width: 100%;
  height: 40%;
}

#instagram1 {
  width: 20px;
  height: 20px;
  float: left;
}

#instagram2 {
  width: 20px;
  height: 20px;
  position: relative;
  right: 168px;
  top: 5px;
}

#bakery {
  color: black;
  float: left;
  position: relative;
  bottom: 15px;
  left: 5px;
}

#cafe {
  color: black;
  float: left;
  position: relative;
  right: 75px;
  bottom: 10px;
}

div {
  width: 200px;
  height: 60px;
  float: right;
  position: relative;
  top: 550px;
  background-color: #b3d9ff;
}

#croissant-wrapper {
  width: 200px;
  height: 100px;
  position: relative;
  left: 1100px;
  top: 250px;
}

#croissant {
  width: 200px;
  height: 100px;
  position: absolute;
}

#croissant:hover {
  width: 250px;
  height: 150px;
}

#espresso {
  position: relative;
  top: 280px;
  width: 200px;
  height: 150px;
}

<span id="croissant-wrapper">
    <img id="croissant" src="https://freepngimg.com/thumb/croissant/29021-7-croissant-transparent-background.png">
</span>

<img id="espresso" src="https://services.garmin.com/appsLibraryBusinessServices_v0/rest/apps/eae8653c-e809-4e35-ac17-d9866ba92b26/icon/e684d982-4aa3-48fb-8e2e-08d53e5096b6">

<div>
  <img id="instagram1" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="bakery"> @red.bakery </p>
  <br/>
  <br/>
  <img id="instagram2" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e7/Instagram_logo_2016.svg/768px-Instagram_logo_2016.svg.png">

  <p id="cafe"> @red.cafe </p>
</div>

css 悬停伪定位问题 class

css positioning problem with hover pseudo class

html

css

css-selectors