在 html 中围绕某些内容放置“框架”的最佳方法是啥？

Posted 2023-02-26

【中文标题】在 html 中围绕某些内容放置“框架”的最佳方法是啥？

【英文标题】：What is the best way to position a 'frame' around something in html?在 html 中围绕某些内容放置“框架”的最佳方法是什么？

【发布时间】：2017-01-11 22:57:22

【问题描述】：

我不是指 html 。我的意思是类似于我在此处输入的文本框周围的框架，带有边框和带有一些图标的按钮栏。

我想要一些可以以 2 种模式存在的可编辑内容。第一个是查看模式，您可以在其中查看内容。第二种是编辑模式，在它周围出现一个框架，其中包含协助编辑所需的任何控件。

我希望框架不会中断内容的正常页面流。因此，如果内容上方有非常接近的内容，则工具栏将在 z 平面中位于其上方。框架应该显示在页面顶部，而不是在其中。

我想过获取被包裹事物的绝对屏幕坐标，并使用“固定”定位将框架放置在正确的位置。

但我想知道“绝对”定位是否可行？除非在这种情况下，绝对定位的框架将是它所包裹的事物的父级，并且“绝对”定位子级相对于父级，而不是父级相对于子级。或者绝对定位的孩子实际上是否比孩子大，因此像我描述的那样包装它？

【参考方案1】：

您只需要一个父 div，其中包含一个用于标题栏的 div 和一个用于输入和输出的第二个 div。

然后，只要您的用户“完成”（此处通过单击“提交”进行模拟），您就可以隐藏输入并使用输入内容填充输出 div。

我创建了一个小提琴来演示这个here。

请注意，输入字段需要应用calc() 才能调整其宽度。

希望这会有所帮助！

【讨论】：

感谢您为其创建小提琴，非常感谢。它与我想要的不同，因为标题部分不在正常页面流之外位于页面顶部，即 z-index > 1。但是在父 div 中构建所有内容并使用 show/ 的想法hide 是一个最有用的建议。