位置固定无上下答案

【问题标题】：Position fixed without top and bottom位置固定无上下
【发布时间】：2017-03-21 09:10:26
【问题描述】：

我发现了有趣的功能，但找不到它发生的原因。所以：我们有固定的位置元素，它在身体下方。第一个元素有样式

.firstEl {
  width:100%;
  height:200px;
  background-color:green;
}

第二个元素有

.fixedEl {
  position:fixed;
  right:0;
  height:100px;
  width:50px;
  background-color:red;
}

你认为top元素定位会在哪里固定？当 js 改变第一个元素的高度并且我们的固定容器也改变他的位置时，这是一个有趣的行为。 https://jsfiddle.net/titusja/ue715fuk/

附：如果有人可以帮助找出它发生的原因（我的意思是这种行为的文档），我会非常高兴

【问题讨论】：

如果你想要正式的 W3C 推荐，here you go。

标签： css css-position fixed

【解决方案1】：

使用固定位置而不设置top, left, .. 将具有与相对于其自身初始位置的绝对位置相同的行为。

但设置top, left, ... 将固定相对于文档或页面的位置。

【讨论】：

【解决方案2】：

元素的位置不默认为0, 0。它的位置默认设置为相对于包含元素，因此在您的示例中，.fixedEl 具有相对于视口的right: 0，顶部是0px 从.firstEl 的顶部。

默认情况下此元素的默认位置和不滚动的视口将从顶部开始为200px，左侧显然取决于您的div的宽度。但是，如果您不覆盖顶部和左侧，它们已经被渲染引擎定义为top:200px、left:(width of the viewport - width of .fixedEl)，left 属性被定义为right: 0; 的原因

然后在调整窗口大小时，调整该位置以反映基于视口的位置，以便在您向下滚动时更改位置以使其保持固定。

因此，只需添加“位置：固定；”您的属性（就浏览器而言）如下：

position: fixed;
top: 200px; // defined by default during browser rendering in some browsers (based on scroll position on load)
left: (width of the viewport - width of .fixedEl); // defined by default during browser rendering in some browsers (based on scroll position / width of browser at time of load and due to right: 0)

【讨论】：