定位属性设置为position: fixed(但不设置top等属性)，在浏览器窗口很小的情况下，为什么在页面上看不到这个元素？

Question

将元素的定位属性设置为position: fixed(但不设置top等属性)，当浏览器窗口很小时，为什么在页面上看不到这个元素，滑动滚动条也没有看到？

也可在JSBIN中查看运行效果

<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>

div {
    width: 100px;
    height: 200px;
    border: 2px solid black;
    margin: 10px;
}
.four {
    position: fixed;
}

Answer 1

有以下原因：
1.position设置为fixed的时，元素脱离文档流，且不会为该元素预留空间，而是指定元素相对于屏幕视口（vierport）的位置来指定元素位置，元素的位置在屏幕滚动时不会改变。
2.而滚动条（与overflow相关）一般是在一个元素内容过大无法适应的时候主动/被动设置为auto/scroll后出现的。