CSS懸浮窗制作教程 CSS懸浮窗，就是在頁面中浮動的窗口，經常用于彈出廣告、提示框、菜單等。下面就來介紹一下如何制作CSS懸浮窗。 1. HTML結構部分 先來看一下HTML結構部分，包含一個父容器和一個子容器，子容器就是懸浮窗的內容。

<div class="parent">
<div class="child">懸浮窗內容</div>
</div>

2. CSS樣式部分 接下來，我們為父容器和子容器設置一些樣式。首先，我們需要為父容器設置寬度和高度，同時設置position為relative。

.parent {
width: 300px;
height: 300px;
position: relative;
}

其次，為子容器設置position為absolute，并設置top和left為0，使其浮動在父容器的左上角。

.child {
position: absolute;
top: 0;
left: 0;
}

現在，我們已經完成了懸浮窗的制作，但它現在還沒有浮動。為了讓它浮動，我們需要再添加一些樣式。 為了讓子容器出現在父容器上方，我們可以為子容器添加一個z-index屬性，并將其值設為1。

.child {
position: absolute;
top: 0;
left: 0;
z-index: 1;
}

接下來，我們為父容器設置:hover樣式，當鼠標移到父容器上方時，子容器就會浮現出來。

.parent:hover .child {
display: block;
}

最后，為了讓子容器在浮現時平滑過渡，我們可以再為子容器添加一個transition屬性。

.child {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: opacity .3s ease;
}
.parent:hover .child {
opacity: 1;
}

這樣，我們就完成了CSS懸浮窗的制作。全面的代碼如下：

<style>
.parent {
width: 300px;
height: 300px;
position: relative;
}
.child {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0;
transition: opacity .3s ease;
}
.parent:hover .child {
display: block;
opacity: 1;
}
</style>
<div class="parent">
<div class="child">懸浮窗內容</div>
</div>

總結 通過上面的步驟，我們可以制作一個簡單的CSS懸浮窗，它可以顯示出來當用戶鼠標移到容器上，并且可以平滑過渡。通過改變父容器和子容器中的樣式，我們可以使懸浮窗的外觀和功能有所改變。