CSS 位置：固定不起作用？

Question

我使用下面的代码将此元素

<div class="col-scroll-fixed"></div>

放置在屏幕的右侧。但它没有固定在屏幕上。我什至尝试将

!important

添加到每个 CSS 属性，但无法获得我想要的结果。

.col-scroll-fixed{
    width: 310px;
    position: fixed;
    top:0;
    right: 30px;
    bottom: 0;
   z-index: 9999;
}

所以，我想知道相对于 `position:fixed` 的工作原理。有没有人帮我解决这个问题。

注意：在 chrome 和 firefox 中检查，设备：OSX

Answer 1

#outer {
  transform: scale(1.5);
  width: 100px;
  height: 100px;
  border: 1px solid blue;
}

#inner {
  position: fixed;
  top:0;
  right:0;
  width: 50px;
  height: 50px;
  border: 1px solid red;
}

<div id="outer">
  <div id="inner">Inner</div>
</div>

可能是因为你将bottom和top属性都设置为0。浏览器无法遵循这一点。必须设置顶部或底部，但不能同时设置。

我还注意到，当元素位于另一个

position: fixed;

或

position: fixed;

元素内部时，

position: absolute;

并不总是有效，至少在 Chrome 中是这样。因此，您应该检查元素的父级并确保它们都相对定位。

不幸的是，虽然我可以在我正在开发的项目中重现这一点，但我无法在片段中重现它。

您还需要确保它没有应用

float

或任何弹性盒父项，因为它们似乎也覆盖了固定定位行为。

此外，请删除其或其父级上的任何

transform

规则，因为这似乎会在 Chrome、Firefox、Opera 和 Edge 中引起问题。所附片段演示了这个问题。

编辑： 事实证明，这是符合规范的预期行为，但如果您不知道的话，肯定会让您失望。这里真正重要的是，元素的父级之一很可能形成一个新的堆叠上下文，这导致它与其父级而不是窗口对齐。

我将此记录为 Chrome、Firefox、Opera 和 Edge 的问题（在 IE 中工作正常）。

Answer 2

带有

position: fixed;

的元素相对于屏幕的视口定位，这意味着即使页面滚动，它也始终保持在同一位置。 top、right、bottom 和 left 属性用于定位元素。打印时，该元素将出现在每一页上。

这是您的代码，我添加了背景颜色和高度，以便我们可以看到它。这就是预期的位置。

.col-scroll-fixed {
    width: 310px;
    height: 30px;
    background-color: purple;
    position: fixed;
    top:0;
    right: 30px;
    bottom: 0;
    z-index: 9999;
}

<div class="col-scroll-fixed"></div>

Answer 3

在我的例子中，这是因为具有 position:fixed 的元素位于具有 container-type: inline-size;

的元素内部

Answer 4

关于使用

position: fixed

该元素相对于浏览器窗口定位。 举个例子：

.className{
    positon: fixed;
    top: 0;
    left: 0;
}

上面的 CSS 会将元素定位到屏幕的左上角。

这是一个 CSS 示例的小提琴：

http://jsfiddle.net/244ju0ar/

工作完全正常。如果您希望“div”位于屏幕的最右侧。你需要使用

right: 0;

否则，如果还有其他问题，请告诉我。