位置固定，无上下 [英] Position fixed without top and bottom

问题描述

我发现了有趣的功能，但找不到原因。因此：
我们有固定位置元素，其第二个位于正文下方。第一个元素具有样式

i found interesting feature, but cant find why it happens. So: We have fixed position element, which second under body. First element have styles

.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/

Where do you think will be fixed element positioning by top? It`s intresting behavior when js change height of first element and our fixed container change his position too. https://jsfiddle.net/titusja/ue715fuk/

PS如果有人可以帮助您找到发生这种情况的原因（我是对此行为进行记录），我会非常满意

P.S. If someone can help to find why it happens(i mean documentation of this behavior) i`ll be very greatfull

推荐答案

使用固定的相对于其初始位置，未设置顶部，左侧，.. 的位置的行为与绝对位置相同。

Using fixed position without setting top, left, .. will have the same behave as absolute position relative to its own initial position.

但是将设置为上，左，... 将固定相对于文档或页面的位置。

But setting the top, left, ... will fix the position relative to the document or the page.

这篇关于位置固定，无上下的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！