htmlで何かの周りに 'フレーム'を配置する最良の方法は何ですか？

Question

html <フレーム>を意味するものではありません。私はここに入力しているこのテキストボックスを囲むフレームのようなもので、ボーダーとその中にいくつかのアイコンが付いたボタンバーがあります。

2つのモードで使用できる編集可能なコンテンツが必要です。 1つ目はビューモードで、そこにコンテンツが表示されます。もう1つは編集モードです。編集モードでは、編集を支援するために必要なコントロールがフレームに表示されます。

私はフレームがコンテンツの通常のページフローを中断しないようにしたいと思います。したがって、コンテンツの上に非常に近いものがあった場合、ツールバーはz平面の上に表示されます。フレームは、ページの上部ではなく、ページの上部にあるように見える必要があります。

ラップされているものの絶対的な画面座標を取得し、正しい場所にフレームを取得するために '固定'の位置を使用することを考えました。

しかし、「絶対的な」測位が機能するかどうか疑問に思っていますか？この場合を除いて、絶対的に配置されたフレームは、ラップするものの親であり、絶対的な位置は、子を親に対して相対的な位置にし、子に対する相対的な位置にはしません。または、絶対的に配置されている子供は、実際には子供よりも大きなサイズを持つことができます。

Answer 1

ヘッダーバーのdivと入力と出力の両方のdivを含む親divが必要です。

これで、ユーザーが「完了」（「送信」をクリックしてシミュレート）されるたびに、入力を非表示にし、出力divに入力の内容を入力します。

私はこれを示すフィダルを作成しましたhere。

入力フィールドの幅を調整するには、入力フィールドにcalc()が適用されている必要があります。

希望すると便利です。