css 具有 translatey(0) 的元素未正确定位

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>

使用 transform: translatey(0) 我希望 div“跳到主要内容”位于页面顶部。但是，它位于 div“框”的顶部。

如果我从 translateY(0) 改为 top: 0，那么它就会出现在页面的顶部。为什么 translateY 的行为不同？这几乎就像 translateY 不尊重绝对位置。我认为 position: absolute 会占用常规流量。

谢谢。

Answer 1

transform 属性将应用 relative 转换。它通常用于动画而不是定位，并且不能与 position 属性.

配对使用

Answer 2

删除绝对定位并使用相对定位。然后就可以用transform: translateY(50%) translateY(-50%);置顶了。

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

（注意：问题中给出的代码中的错字 - 翻译。）

transform: translateY 将元素相对于它所在的位置移动。

如果您看到 translateY(-50%)，这意味着该元素将向上移动其自身高度的一半。

如果您看到 translateY(0) [如问题中]，则表示该元素根本没有移动。

如果您看到 translateY(50px)，则表示该元素从其原始位置向下移动了 50px。

请注意，在任何翻译中，元素都在视觉上移动，但不会在整体内容中移动，此翻译不会影响其他元素的定位。

要使绝对定位的元素转到页面顶部，如问题中所述，它需要设置 top: 0 并且相对于已设置位置的第一个祖先。因此请注意，您不希望将其定位的 parents/grandparents 中的 none 设置为相对位置或绝对位置。在这种特殊情况下，系统将进入 'all the way up'，因为没有中间定位元素。

采用给定的代码，因为它是一个 SO 片段，意识到将有一个包含页面内容的 body 元素，我们根据该元素定位该元素：

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 具有 translatey(0) 的元素未正确定位

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

css

css-position