網(wǎng)站中，我們常常需要在頁面的某個(gè)位置懸浮一個(gè)右側(cè)飄窗，通常用于廣告、客服等信息的展示。這時(shí)候，我們可以使用CSS來實(shí)現(xiàn)。

//CSS樣式
.container{
width: 1200px;
margin: 0 auto;
position: relative;
}
.right-box{
width: 200px;
height: 300px;
position: fixed;
top: 50%;
margin-top: -150px;
right: -200px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
z-index: 999;
}
.btn-cancel{
width: 20px;
height: 20px;
position: absolute;
top: 0;
right: 0;
cursor: pointer;
background: url(close.png);
}
@media screen and (max-width: 1240px){
.right-box{
right: -220px;
}
}
@media screen and (max-width: 1200px){
.container{
width: 1000px;
}
.right-box{
right: -180px;
}
}
@media screen and (max-width: 992px){
.right-box{
display: none;
}
}

以上CSS代碼實(shí)現(xiàn)了一個(gè)右側(cè)飄窗，首先容器需要設(shè)置為相對定位，然后利用固定定位將右側(cè)飄窗定位在頁面右側(cè)，并使用top: 50% 和 margin-top: -150px 讓其居中顯示。

為了讓右側(cè)飄窗更加美觀，我們還對其添加了一些陰影和背景顏色。同時(shí)，還添加了一個(gè)關(guān)閉按鈕，當(dāng)用戶不想看到右側(cè)飄窗時(shí)，便可點(diǎn)擊該按鈕將其關(guān)閉。

值得注意的是，我們還針對不同的屏幕寬度進(jìn)行了響應(yīng)式處理，當(dāng)屏幕寬度小于1200px時(shí)，我們將容器寬度設(shè)置為1000px，并調(diào)整了右側(cè)飄窗的位置。當(dāng)屏幕寬度小于992px時(shí)，我們隱藏右側(cè)飄窗，以免影響用戶的瀏覽體驗(yàn)。