css element with translatey(0) is not being positioned properly

Issue

html {
  scroll-behaivor:  smooth;
  padding: 0;
  margin: 0;
}

#skip-to-main-content {
  position: absolute;
  transform: translatey(0);
  display: block;
  background: grey;
  width: 100%;
}

.box {
  height: 100px;
  width: 100px;
  background: green;
  margin-top:  200px;
}

<div id="skip-to-main-content">Skip to main content</div>
<div class="box"></div>

With the transform: translatey(0) I was expecting the div "skip-to-main-content" to be positioned at the top of the page. However, it's positioned at the top of the div "box".

If I change from translateY(0) to top: 0. Then it appears at the top of the page. How come translateY is acting differently? It's almost like translateY is not honoring the position absolute. I thought the position: absolute would have take it own of the regular flow.

Thanks.

Solution

The transform property will apply relative transformation. It is usually used for animation more than positionning, and doesn't work in pair with position property.

Answered By - Jean Will