position static 屏幕滚动

这个黄色背景的提示框，样式定义中 position 设置为 static，因此可以精确地定位到输入框的下方，并且覆盖住原有的内容。达到这样的效果，static 值是必须的，他使该元素脱离于原有的元素布局，可以浮动到父层容器内的任何位置。

请注意这个父层容器，通常 static 元素只能在父层元素的容器内显示，具体位置用 left 和 top 属性决定。

这本来没什么问题，不过，当浏览器的窗口不能完整容纳整个页面，而出现滚动条时，就会出现问题。

如果提示框定义在 body 元素内，那么当滚动页面时，提示框会保持与浏览器窗口的位置不变。但此时提示框与页面元素的相对位置会发生变化，也就是相对位置不同步了。

就拿图示的例子来说，向下拖拽滚动条，文字输入框会向屏幕上方移动，但黄色提示框则保持不动，因为他的 position 相对位置的参照物是浏览器，而不是页面顶部。

如果想让输入框和提示框保持同步，则需要把提示框定义在与输入框相同的父层容器内。

这时 position 的 left 和 top 的参照物就是父层容器了，拖拽滚动条，输入框和提示框的相对位置会保持不变。

从合理的角度来说，如果整个页面有多处需要提示框，则应该在 body 下面定义一个全局的 div，在需要显示的位置，通过绝对定位调整提示框的 left 和 top。

但这样没法保证页面滚动时提示框与预期位置同步。

在每个需要提示框的地方，都定义一个独立的输入框，则可以避免同步的问题，但页面会存在过多的 dom 节点，容易造成浏览器内存泄露，或者导致浏览器打开页面速度缓慢。