css element with translatey(0) is not being positioned properly [duplicate] - css

Question

This question already has answers here:
Why aren't my absolutely/fixed-positioned elements located where I expect?
(3 answers)
Closed 1 year ago.
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.

Answer 1

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.

Answer 2

Remove your absolute positioning and use relative. Then you can use transform: translateY(50%) translateY(-50%); to place at the top of the page.
html {
scroll-behaivor: smooth;
padding: 0;
margin: 0;
}
#skip-to-main-content {
position: relative;
transform: translateY(50%) translateY(-50%);
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>

Answer 3

(Note: typo in the code given in the question - translatey.)
transform: translateY moves the element relative to where it is positioned.
If you see translateY(-50%) that means the element will be moved upwards by half of its own height.
If you see translateY(0) [as in the question] that means the element isn't moved at all.
If you see translateY(50px) that means the element moves down by 50px from its original position.
Note that in any translation the element moves visually but it does not move within the overall content, this translation does not effect the positioning of other elements.
To get an absolutely positioned element to go to the top of the page, as is described in the question, it needs to have top: 0 set AND that will be relative to the first ancestor that has position set. So be careful that none of the parents/grandparents that you don't want it to be positioned in have position relative or absolute set. In this special case the system will go 'all the way up' as there is no intervening positioned element.
Taking the given code, and as it's an SO snippet realising that there will be a body element encompassing the content of the page, we position the element in relation to that:
html {
scroll-behaivor: smooth;
padding: 0;
margin: 0;
}
#skip-to-main-content {
position: absolute;
top: 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>