CSS的position:fixed无法工作？

Question

CSS的position:fixed无法工作？

4

我使用下面的代码将此元素 <div class="col-scroll-fixed"></div> 定位在屏幕右侧。但它没有固定在屏幕上。我甚至尝试为每个CSS属性添加 !important，但无法得到我想要的结果。

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

所以，我想了解相对于什么`position:fixed`会起作用。是否有人可以帮助我解决这个问题。

注意：在Chrome和Firefox上进行了检查，设备：OSX

- Masoom

1

这个按预期工作，定位在右侧和顶部偏移30像素。 - radiant

你能设置一个 Fiddle 吗？ - Manoj Dhiman

3个回答

0

一个具有 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>

- Cheslab

-1

关于使用

position: fixed

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

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

上述CSS将元素定位于屏幕的左上角。

这是一个带有您CSS示例的fiddle：

http://jsfiddle.net/244ju0ar/

完全正常。如果你想让“div”在屏幕的最右边，你需要使用

right: 0;

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

- Mitali Das

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KthProg · Accepted Answer

#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: absolute;元素内部时，position: fixed;并不总是起作用，至少在Chrome中是这样的。因此，你需要检查元素的父级并确保它们都处于相对定位状态。

不幸的是，尽管我能够在我正在处理的项目中复制这个问题，但在片段中却无法重现。

此外，你还需要确保它没有应用float，也没有任何flexbox父级，因为这两者都可能覆盖固定定位行为。

此外，请删除它或其父级上的任何transform规则，因为这似乎会在Chrome、Firefox、Opera和Edge中引起问题。附加的代码片段演示了这个问题。

编辑：根据规范，这实际上是预期行为，但如果你不知道这一点，肯定会让你困惑。真正重要的是，很可能是元素的某个父级形成了一个新的层叠上下文，这使得它与其父级对齐，而不是窗口。

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