在響應式站點中創建浮動“div”

Question

嗨，我是一名計算機科學專業的學生，為了擴展我的知識，我決定建立一個響應式購物網站。 我使用引導程序構建了該站點。 整個網站都准備好了。 現在我想向用戶顯示他的購買金額。 當他點擊購物車圖標 - 彈出 div - 固定在網站上。 當用戶再次點擊購物車時 - div 被刪除。 要添加和刪除購物車 - 使用 toggle 事件。

我的問題是如何添加一個包含用戶想要購買的產品的文本的 div - 通過“懸停”或保持“固定”在屏幕上？

我嘗試使用固定或相對和絕對定位。 但在任何時候，他們都參與了該網站 - 而不是“漂浮”在上面，我將完整的代碼上傳到 github。

謝謝您的幫助

Answer 1

如果你想讓你的彈出窗口漂浮在網站上，你想使用position: fixed 。 然后，如果您有許多元素可以將一個放在另一個之上，則可以使用z-index 。 請注意，它也適用於position: absolute 。 這兩種定位都將項目置於布局的另一個層次，保持 rest 不變。

jsfiddle 示例： https://jsfiddle.net/p86nfrxc/1