html - 在 html 中将 'frame' 定位在某物周围的最佳方法是什么?

标签 html css position

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

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

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

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

但我想知道“绝对”定位是否可行?除了在这种情况下,绝对定位的框架将是它包装的东西的父级,并且“绝对”定位子级相对于父级,而不是父级相对于子级。或者用 absolute 定位的 child 实际上有比 child 更大的尺寸,因此像我描述的那样包裹它?

最佳答案

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

然后您将隐藏输入并在用户“完成”时使用输入的内容填充输出 div(此处通过单击“提交”进行模拟)。

我创建了一个 fiddle 演示 here .

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

希望这对您有所帮助!

关于html - 在 html 中将 'frame' 定位在某物周围的最佳方法是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41602262/

相关文章:

css - 如何修复 CSS 背景位置

html css代码水平或单行显示多个表格

javascript - "html select required"的 AngularJS 指令

css - 为什么内联 block 在不间断空格后中断?

javascript - 使 svg 快照图像在 div 上排列

css - 位置粘性自动 "top"位置

c - SDL指定窗口大小和位置

html - 如何防止我的 CSS 变换(旋转和倾斜原点)向右移动几个像素?

javascript - 如何在 PHP 循环中创建单独的 ID

css - 在没有 Absolute 的情况下覆盖 Ddivs?