固定元素相对于其父元素的定位

Question

我有一个元素在拖动时会获得

position: fixed

。该元素位于模态框内，该模态框是

body

元素的直接子元素。

在下图中，模态框是灰色的，主体的其余部分是黑色的，按钮是蓝色的。当我向按钮添加以下样式时：

position: fixed;
top: xxxpx;
left: -100px;

它相对于模式而不是视口来定位按钮。具有

position: fixed

的元素是否有可能相对于除视口之外的其他物体定位？相反，它的作用就像一个绝对定位的元素。

Answer 1

“通常”相对于视口的位置固定。

但也有例外。请参阅MDN

该元素将从正常文档流中删除，并且不会在页面布局中为该元素创建空间。它相对于视口建立的初始包含块进行定位，除非它的祖先之一将变换、透视或过滤器属性设置为除“无”之外的其他属性（请参阅 CSS 变换规范），在这种情况下，祖先的行为如下包含块。（请注意，浏览器与透视图和过滤器不一致会导致包含块形成。）其最终位置由上、右、下和左的值确定。

这是一个简单的例子：

body {}

.parent {
  position: relative;
  margin: 100px;
  transform: scale(1);
  width: 50vw;
  height: 10vw;
  background: black;
  rfilter: blur(1);
}

.child {
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100px;
  height: 100px;
  background-color: blue;
}

<body>
  <div class="parent">
    <div class="child"></div>
  </div>
</body>

请注意，蓝色子元素放置在其父元素的左上角。它的父级有一个变换 - 由于它是scale(1)，我们可能会假设它没有做太多事情。但它确实创建了父级作为包含块。

我认为你的问题是父级的转换。

Answer 2

如果您正在使用react（并且其他框架中可能有类似的东西），您可以通过以下方式使用“react-dom”中的createPortal：

createPortal(<YourComponent/>, document.body)

在这种情况下，您不需要摆脱父元素中的变换，只需忽略它们即可。

固定元素相对于其父元素的定位

问题描述投票：0回答：2

2个回答

最新问题

固定元素相对于其父元素的定位

问题描述 投票：0回答：2

2个回答

最新问题

问题描述投票：0回答：2