css position：已修复不将元素定位在屏幕左上角的问题

ltskdhd1 于 2023-01-27 发布在其他

关注(0)|答案(2)|浏览(182)

我有一个position: fixed元素。它有一些top和left属性，但在屏幕上看不到。经过一些调试后，我发现它的位置偏离了它应该在的位置。所以我设置了top: 0和left: 0，现在该元素在我想要的位置（靠近中底部），而不是在屏幕的左上角，因为它应该在。
为什么会发生这种情况？一个原因是它的父容器也有固定的位置。我将在下面有一个片段

.container {
  position: fixed;
  // position in the center of screen
  left: 0;
  right: 0;
  top: 400px;
  margin-left: auto;
  margin-right: auto;
}

.child {
  position: fixed;
  left: 200px;
  top: 400px;
}

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

一个固定组件在另一个固定组件中的原因是，一个是容器，另一个是工具提示，所以必须这样。

css

来源：https://stackoverflow.com/questions/75206133/position-fixed-not-positioning-the-element-on-top-left-of-screen

2条答案

按热度按时间

9rbhqvlz1#

left和top属性应该有一些关联的单位，例如像素。请尝试以下操作：

.container {
    position: fixed;

    // position in the center of screen
    left: 0;
    right: 0;
    top: 400px;
    margin-left: auto;
    margin-right: auto;
}

.child {
    position: fixed;
    left: 200px;
    top: 400px;
}

赞(0）回复(0）举报 2023-01-27

n53p2ov02#

找到答案了，这是chrome的一个bug，如果父节点有transform: translate css，那么子节点的固定位置就不起作用了。
Duplicate of this question

赞(0）回复(0）举报 2023-01-27