Question

当我悬停图标img的溢出更改时。你可以在这里找到所有代码： https://jsfiddle.net/DTcHh/12122/

只需悬停图标

P.S。我无法使用z-index：-1，因为我的img的一部分被淘汰了标题的背景......这是屏幕： 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

只需从position: relative;

的CSS删除img即可

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

Answer 2

删除位置：亲属; 。
.avatar img { vertical-align：bottom; }

如果设置position：relative;在一个元素上但没有其他定位属性（顶部，左侧，底部或右侧），它根本不会影响它的位置，它将完全如此。

设置位置时会发生两件事：亲属;一个是它引入了在该元素上使用z-index的能力，这对于静态定位的元素并不起作用。即使您没有设置z-index值，此元素现在也会显示在任何其他静态定位元素的顶部。您可以通过在静态定位元素上设置更高的z-index值来对抗它。第二件事是它限制了绝对定位的子元素的范围。任何相对定位元素的子元素都可以绝对定位在该块中。

img溢出了什么？

2 个答案: