html - img 溢出是怎么回事？

Question

当我悬停图标时，img 的溢出会发生变化。您可以在这里找到所有代码: https://jsfiddle.net/DTcHh/12122/

只需将鼠标悬停在图标上

P.S. I couldn't use z-index:-1, because part of my img goes under header's background... here is screen: https://monosnap.com/file/vfivmX7MGJl8bobULiipeToilyTZIx

标题样式:

.header {
  background: url("../img/background.png") 100% 100%;
  background-size: cover;
  max-width: 1920px;
  max-height: 900px;
  color: white;}

Answer 1

只需从 img 的 CSS 中删除 position: relative;

.avatar img {
    vertical-align: bottom;
    position: relative; //remove this style
  }