Каков наилучший способ разместить «фрейм» вокруг чего-то в html?

Question

Я не имею в виду html < frame>. Я имею в виду что-то вроде рамки, которая обходит это текстовое поле, которое я набираю здесь, с рамкой и панелью кнопок с несколькими значками в ней.

Я хотел бы отредактировать содержимое, которое может существовать в двух режимах. Первый - режим просмотра, где вы видите содержимое. Второй - режим редактирования, в котором вокруг него появляется кадр с любыми элементами управления, необходимыми для редактирования.

Я хотел бы, чтобы кадр не прерывал нормальный поток страниц содержимого. Поэтому, если над контентом было что-то очень близкое, тогда панель инструментов будет располагаться поверх нее в плоскости z. Рамка должна располагаться поверх страницы, а не внутри нее.

Я думал о том, чтобы получить абсолютные координаты экрана вещи, обернутой и используя «фиксированное» позиционирование, чтобы получить рамку в нужном месте.

Но мне интересно, может ли быть «абсолютное» позиционирование? Кроме того, в этом случае абсолютно позиционированный кадр будет родителем вещи, которую он обертывает, а «абсолютный» позиционирует ребенка относительно родителя, а не родителя, относящегося к ребенку. Или может ли ребенок, который позиционируется с абсолютом, на самом деле иметь больший размер, чем ребенок, и, следовательно, обернуть его, как я описываю?

Answer 1

Вам просто нужен родительский div, который содержит div для строки заголовка и второй div для ввода и вывода.

Вы должны были скрыть ввод и заполнить выходной div содержимым ввода всякий раз, когда ваш пользователь был «выполнен» (имитируется здесь, нажав «Отправить»).

Я создал скрипку, демонстрирующую это here.

Обратите внимание, что для ввода поля ввода потребуется , чтобы настроить его ширину.

Надеюсь, это поможет!