覆盖元素是否总是需要位于 HTML 正文的末尾？

Question

我注意到在 javascript 框架中，对话框、工具提示和警报等元素大多出现在正文的末尾。

我正在对这些元素进行自己的实现，并尝试使其防故障。我正在重复一些技术，例如使用透明 iframe 覆盖旧浏览器中的嵌入对象等等。

如果我将对话框/工具提示放在带有{position: fixed} 的 DOM 树深处的某个位置，我会面临哪些限制？我担心这种方法是否存在一些危险，因为大型框架从不使用它。

我要支持 IE8+。

Answer 1

除了 Teemu 提出的非常有效的 z 排序之外，JS 框架的另一个主要考虑因素是执行速度/查找速度。

在 JS 术语中的 DOM 是一个大对象。 javascript 需要越深入地获取它所要求的对象，脚本的性能就越差，take a look at this answer。

因此，将可能要克隆或深度复制的所有内容保持在合理的嵌套级别和正确的 z 顺序是有意义的。这恰好位于正文的末尾，通常最多被一个包含元素包裹。

可能还有其他原因，但我会想到深度/嵌套作为考虑因素。

Answer 2

简短的回答 - 很少有像这样的技术“总是必要的”。 JavaScript 可以轻松地将项目从其在 DOM 中的自然位置移除并随意重新定位。

长答案 - 我不认为从 JavaScript 第一个角度处理这个问题是正确的。从内容自然属于 DOM 其余部分的层次结构的角度来看它。

例如，如果您谈论的是模态对话框，那么 chrome（容器元素）通常不属于 DOM 的其余部分——它们的存在只是为了包含并为其中的内容提供模态覆盖功能。此 chrome 不参与 DOM 的大纲和其余内容。在这种情况下，除非您能够通过 ajax 单独加载它们或将 chrome HTML 嵌入到 JavaScript 中，否则您最接近从主 DOM 中删除它们的方法是将它们附加到主 DOM 内容的底部。请注意，这忽略了即将推出的 TEMPLATE 元素 (http://www.html5rocks.com/en/tutorials/webcomponents/template/)，该元素专为此目的而设计。

但是，对话框的 内容 很可能属于 DOM 的主要内容 - 作为元素，或作为关联元素的属性（即标题或数据）。对于工具提示文本尤其如此。