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

时间:2017-03-21 09:10:26

标签: css css-position fixed

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

.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。如果有人可以帮助找到它发生的原因(我的意思是记录这种行为)我会非常好的

2 个答案:

答案 0 :(得分:1)

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

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

答案 1 :(得分:1)

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

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

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

所以,只需添加“position:fixed;”您的属性(就浏览器而言)如下:

right: 0;