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

Question

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.

score 2 · Accepted Answer · answered Dec 21 '21 at 17:36

2

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 Dec 21 '21 at 17:36

Jean Will

543
3
11

I was told that transform would be more performant for animation than using properties such as the top. So that is why I was exploring translatey. It is interesting that the transform property works from the location of the element in the natural flow and not after elements are positioned outside the document flow. – Scott Walter Dec 21 '21 at 18:01

score 0 · Answer 2 · answered Dec 21 '21 at 17:39

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>

score 0 · Answer 3 · answered Dec 21 '21 at 18:01

(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>

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

3 Answers3