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
  }

Answer 2

删除位置：相对；。
.头像图片 { 垂直对齐：底部； }

如果设置位置：相对；在一个元素上，但没有其他定位属性（顶部、左侧、底部或右侧），它根本不会影响它的定位，它将完全按照原样。

设置位置时会发生两件事：相对；。一是它引入了在该元素上使用 z-index 的能力，这实际上不适用于静态定位的元素。即使您没有设置 z-index 值，该元素现在也会出现在任何其他静态定位元素之上。您不能通过在静态定位元素上设置更高的 z-index 值来对抗它。发生的第二件事是它限制了绝对定位子元素的范围。作为相对定位元素的子元素的任何元素都可以绝对定位在该块内。

img 溢出是怎么回事？

What's goin' on with img's overflow?

html

css

overflow

hover