将固定元素置于容器内中心

Question

我目前正在开发一种表单，该表单应该通过网络组件嵌入到不同的网站中。 当发送表单并且 API 返回错误时，弹出窗口/模式/警报应该显示在页面顶部的中心。由于您可以滚动表单并且错误应该始终可见，因此我考虑将其固定。但是，这会将其修复到视口。由于我对表单的嵌入位置没有影响，我想将其修复到表单本身，而不是出现在网站的“某处”。

我发现你可以通过相对定位容器并使用 margin-top 而不是 top 来做到这一点，这适用于绝对值，但不适用于 50%。我假设它使用了视口宽度的 50%，而不是容器的宽度，因为它离中心真的很远。 这是我尝试过的示例：

.container {
  width: 400px;
  height: 5000px;
  background-color: lightblue;
  position: relative;
  width: min(100%, 300px);
  margin: auto 200px;
}

.child {
  background-color: blue;
  position: fixed;
  margin-top: 3rem;
  margin-left: 50%;
}

<div class="container">
  <div class="child">test</div>
</div>

https://codepen.io/Nils-B-/pen/ZEZLMZm

有没有什么方法可以在CSS中实际做到这一点，或者我是否需要JS将其绝对定位在滚动上？

Answer 1

您能检查一下以下解决方案吗？希望它对你有用。

您可以将

position: sticky;

赋予

child

元素以及该元素的其他顶部值。

.container {
  width: 400px;
  height: 5000px;
  background-color: lightblue;
  position: relative;
  width: min(100%, 300px);
  margin: auto 200px;
}

.child {
  background-color: blue;
  position: sticky;
  top: 50%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="child">test</div>
</div>