CSS是前端開發中不可或缺的技術，在網頁制作中，浮層樣式是常見的交互效果之一。

.overlay {  // 定義浮層樣式類
position:fixed; // 固定定位
left:0; 
top:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0.6); // 設置背景半透明黑色
display:flex;
justify-content:center; // 水平居中
align-items:center; // 垂直居中
z-index: 9999; // 確保浮層在最上層
}

以上代碼中，我們使用了position屬性將浮層固定在頁面左上角，使用rgba屬性設置背景半透明且顏色為黑色，使用display屬性將浮層元素變為彈性盒子并進行水平居中和垂直居中處理，使用z-index屬性確保浮層在最上層。

為了使浮層在點擊時觸發顯示和隱藏效果，我們可以使用JavaScript來實現。

const overlay = document.querySelector('.overlay');
const btnShow = document.querySelector('#btn-show');
const btnHide = document.querySelector('#btn-hide');
btnShow.addEventListener('click', () =>{
overlay.style.display = 'flex';
});
btnHide.addEventListener('click', () =>{
overlay.style.display = 'none';
});

以上代碼中，我們通過querySelector方法獲取到了浮層和顯示、隱藏按鈕的DOM節點，然后分別為顯示和隱藏按鈕添加了click事件監聽器。當顯示按鈕被點擊時，我們將浮層的display屬性設置為flex，即顯示浮層；當隱藏按鈕被點擊時，我們將浮層的display屬性設置為none，即隱藏浮層。

通過以上示例，我們可以看到CSS和JavaScript的配合可以輕松地實現網頁中的交互效果，并提升了用戶體驗。