在响应式网站中创建浮动的“div”

Question

我是一名计算机科学专业的学生，为了扩展我的知识，我决定建立一个响应式购物网站。我使用引导程序构建了该网站。整个网站都准备好了。现在我想向用户展示他的购买金额。当他点击购物车图标 - 弹出div - 固定在网站上。当用户再次单击购物车时 - div 将被删除。要添加和删除购物车 - 请使用切换事件。我的问题是，如何添加一个div，其中包含用户想要购买的产品的文本 - 通过“悬停”或在屏幕上保持“固定”？我试图使用固定的，或相对的和绝对的定位。但是在任何时候，他们都占据了网站的一部分 - 而不是“浮动”在上面，我将完整的代码上传到github。

Answer 1

如果您希望弹出窗口浮动在网站上，则需要使用 。然后，如果您有很多元素要将一个放在另一个之上，则可以玩。请注意，它也可以与 一起使用。这两个定位都将项目置于布局的另一个级别，其余部分保持不变。position: fixedz-indexposition: absolute

j小提琴示例：https://jsfiddle.net/p86nfrxc/1