Question

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

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

第二个元素

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

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

P.S。如果有人可以帮助找到它发生的原因（我的意思是记录这种行为）我会非常好的

Answer 1

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

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

Answer 2

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

默认情况下此元素的默认位置和未滚动的视口将从顶部开始200px，左侧显然取决于div的宽度。但是，如果您不覆盖顶部和左侧，它们已由呈现引擎定义为top:200px，left:(width of the viewport - width of .fixedEl)，则left属性已定义，因此{{1 }}

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

所以，只需添加“position：fixed;”您的属性（就浏览器而言）如下：

right: 0;

位置固定，没有顶部和底部

2 个答案: