如果你想在你的網(wǎng)頁(yè)上添加一個(gè)浮動(dòng)的窗口,那么 CSS 提供了一種非常簡(jiǎn)單的解決方案,即頂層浮動(dòng)窗口。這種窗口可以在整個(gè)頁(yè)面的上層懸浮,而不會(huì)影響到其他元素的布局。
實(shí)現(xiàn)這種效果需要使用以下的 CSS 代碼:
.popup { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 9999; } .popup .content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; height: auto; background-color: white; padding: 20px; z-index: 10000; }
這些代碼將創(chuàng)建一個(gè)具有帶有半透明背景的元素,而窗口本身則位于頁(yè)面的最上層,從而使它們能夠浮現(xiàn)在其他元素之上。
如果你想自定義窗口的樣式,只需要根據(jù)你的需求修改 CSS 代碼即可。