如何使样式为内联块的 link 的背景不出现在其后续 link 兄弟姐妹的后面？

Question

我有几个 links 被缩放并且它们的背景随着鼠标悬停时的 1s 过渡而改变。当悬停第一个 link 时，它被缩放得如此之大以至于它悬停在其他 links 上并且其他 links 在它下面可见。第二个 link 悬停时，不会出现在第一个 link 下方，而是出现在第三个 link 下方。第三个 link 没有出现在任何其他 link.

下

a {
  color: lightblue;
  transform: scale(1);
  transition: all 1s;
  display: inline-block;
  background-color: transparent;
}

a:hover {
  transform: scale(5);
  background-color: yellow;
}

<div class="page-footer">
  <a href="">ABCD</a> /
  <a href="">EFGH</a> /
  <a href="">IJKL</a>
</div>

我在 Chrome 和 Firefox 上都看到了这种行为。我不明白为什么它会这样工作，我希望 links 的背景表现正常。

谢谢。

Answer 1

这是因为顺序，在正常流程中，唯一存在的堆栈上下文是 <html>，一个元素将被标记中紧随其后的下一个元素覆盖。

使用 z-index，某些元素的渲染顺序会受到影响，但是 z-index 不会有任何影响，因为 z-index 仅适用于定位元素。

定位元素：是位置值不是static的元素

我们可以使用 position:relative 因为它的行为类似于静态。

a {
  color: lightblue;
  transform: scale(1);
  transition: all 1s;
  display: inline-block;
  background-color: transparent;
  z-index: 1;
}

a:hover {
  transform: scale(5);
  background-color: yellow;
  position: relative;
  z-index: 2; /* higher than other <a> */
}


/* Just to center Not needed */
div {
  display: table;
  margin: 5em auto;
}

<div class="page-footer">
  <a href="">ABCD</a> /
  <a href="">EFGH</a> /
  <a href="">IJKL</a>
</div>

如何使样式为内联块的 link 的背景不出现在其后续 link 兄弟姐妹的后面？

How to make the background of a link styled as inline-block not appear behind its following link siblings?

html

css

anchor

css-transitions

css-transforms