Как сделать, чтобы поле ввода появлялось поверх холста в html

Я пытаюсь, чтобы поле ввода отображалось поверх холста и точно располагало поле ввода. Аналогичный вопрос задавали 7 лет назад, но принятый ответ мне не подходит.

Одна попытка была такой:

 <html>
 <body>

     <div style = "margin:0px;padding:0px;position:absolute;width:700;height:700;border-style:solid">
     <canvas style = "width:700px;height:700px;"></canvas>
     <input type = "text" style = "position:absolute;width:30;height:30;z-index:2"/></div>

и еще одна попытка была такой:

 <html>
 <body>
     <div style = "position:relative;width:800px;height:800px">
         <canvas width = "800" height = "800"></canvas>
         <input type = "text" "position:absolute;left:100px;top:300px;width:600px " />
     </div>
 <body>

Использование браузера Chrome на Macintosh, если это имеет значение.

html html5-canvas

06.04.2019 00:47

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

243

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Ваша вторая попытка верна, вы просто пропустили свойство стиля перед строкой стиля в элементе ввода.

<html>
 <body>
     <div style = "position:relative;width:800px;height:800px">
         <canvas width = "800" height = "800"></canvas>
         <input type = "text" style = "position:absolute;left:100px;top:300px;width:600px " />
     </div>
 <body>

06.04.2019 05:24

Другие вопросы по теме

Как разрешить рисовать векторы между точками на сетке?

Получить точку на кривой Безье без угадывания или грубой силы

Canvas.drawimage автоматически воспроизводимого видео работает только тогда, когда элемент видео виден

Работа с элементом видео и холста в Angular

Как отсортировать прямоугольники в javascript по высоте

Javascript: сохранение изображений getUserMedia()

Как использовать прослушивание события только для щелчка левой кнопкой мыши?

HTMLCanvasElement: получение Uint8ClampedArray

Emscripten передает массив uint8_t в javascript?

Как я могу вычислить точки на круговом пути? (Центр известен)

Как сделать, чтобы поле ввода появлялось поверх холста в html

Ответы 1

Другие вопросы по теме

Похожие вопросы