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

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

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

也许是因为您将底部和顶部属性都设置为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

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

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

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

这是CSS示例的小提琴：

http://jsfiddle.net/244ju0ar/

完全正常。如果你想要＆＃34; div＆＃34;在屏幕的最右边。您需要使用

right: 0;

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

CSS位置：固定不起作用？

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

3 个答案: