全屏后如何更改元素位置？

如何解决全屏后如何更改元素位置？

我希望顶部 margin 为 31%，然后在全屏模式下切换到 35%。 这在 Firefox 中受支持，所以我不确定为什么它不起作用。

@-moz-document url-prefix() {
  #div1:not(:fullscreen) { 
    position: absolute; 
    margin: 31% 0 0 2.2%;
}
  #div1:fullscreen { 
    position: absolute;
    margin: 35% 0 0 2.2%;
  }
}

编辑：我尝试了 class 而不是 id，仍然没有运气。