Css 容器内的中心固定元件

发布于03月20日

我目前正在开发一种通过Web组件嵌入到不同网站的表单. 当表单被发送并且API返回错误时，一个弹出/modal/alert应该显示在页面顶部水平居中.因为你可以滚动的形式和错误应该总是可见的，我想定位它固定.但是，这将其固定到视口.由于我对表单嵌入的位置没有任何影响，所以我想将其固定到表单本身，而不是出现在网站上的"某个地方".

我发现你可以通过相对地定位容器并使用margin—top而不是top来做到这一点，这适用于绝对值，但不适用于50%.我假设它使用了50%的视口宽度，而不是容器的宽度，因为它确实远离中心. 以下是我try 过的一个例子:

.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来将它完全放在scroll上？

.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%); }

Css 容器内的中心固定元件

推荐答案

Css相关问答推荐

如何在CSS calc()中使用反向百分比/无单位计算？

视频嵌入在Bootstrap 5轮播中没有响应扩展

基于子元素的子元素数量的样式元素

如何在CSS中平滑线性平移动画

SVG文本在移动浏览器上增长并溢出

MUI Textfield-悬停时输入标签 colored颜色

如何在使用 bslib 5 的shiny 应用程序中使用样式参数排列 ui 元素

带插值的 Sass 数学函数

在 WooCommerce 变体 Select 中转换属性文本以大写

css - 悬停访问的链接没有背景 colored颜色

CSS 在具有多个背景图像的元素上过滤一个背景图像

如何禁用亚像素渲染或强制浏览器将属性舍入到最近的像素？

Icomoon：如何避免重复索引(具有相同内容 ID 的不同图标)？

如何测试页面上的文本被删除

nth-child 在一个页面上工作，但不在另一个页面上

我怎样才能让这个边框出现在按钮元素的上方？

禁用输入的 CSS Select 器 type="submit"

将一行文本保留为单行 - 换行或不换行

如何仅使用 CSS 制作网格(如方格纸网格)？

CSS：怎么说 .class：last-of-type [类，不是元素！]