Это из-за порядка, в обычном потоке единственным существующим контекстом стекирования является <html>, и элемент будет покрыт следующим элементом, который следует за ним в разметке.
Использование z- index, порядок рендеринга определенных элементов зависит, однако z-index не будет иметь никакого эффекта, потому что z-index работает только с позиционированными элементами.
позиционированный элемент: элемент со значением позиции, другим чем stati c
Мы можем использовать position:relative, потому что он ведет себя как stati c.
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>