Создание плавающего "div" на адаптивном сайте

Question

Привет, я изучаю информатику. Чтобы расширить свои знания, я решил создать отзывчивый сайт покупок. Я построил сайт, используя bootstrap. И весь сайт готов. Теперь я хочу показать пользователю сумму его покупки. Когда он нажимает на иконку корзины покупок - появляется div - фиксируется на сайте. И когда пользователь снова нажимает на корзину покупок - div удаляется. Чтобы добавить и удалить корзину - используйте событие переключения.

Мой вопрос в том, как я могу добавить div, который будет содержать текст для продуктов, которые пользователь хочет купить - путем «наведения» или «фиксированного» на экране?

Я пытался использовать фиксированное или относительное и абсолютное позиционирование. Но во все времена они принимали участие в сайте - и не "плавали" на нем. Я загрузил полный код на github.

Спасибо за помощь

Answer 1

Если вы хотите, чтобы ваше всплывающее окно появлялось на сайте, вы хотите использовать position: fixed. Затем вы можете поиграть с z-index, если у вас есть много элементов, которые нужно разместить один над другим. Обратите внимание, что он также будет работать с position: absolute. Оба этих позиционирования переносят элемент на другой уровень макета, оставляя остальное без изменений.

пример jsfiddle: https://jsfiddle.net/p86nfrxc/1