在網頁設計中，常常會遇到彈出層的需求，這時候我們可以使用 CSS 來完成。同時，為了提高用戶體驗，我們還可以添加拖動功能，讓彈出層更加靈活，本文就來介紹如何使用 CSS 實現彈出層和拖動功能。

首先，我們需要用 CSS 來定義彈出層的樣式。

.popup{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 0 10px rgba(0,0,0,.1);
width: 300px;
height: 200px;
}

這里定義了一個類名為 .popup 的樣式，我們使用了 position 屬性將其定位到屏幕中央，使用 transform 屬性讓它水平和垂直居中，然后設置了背景顏色、邊框、陰影和寬高。

接下來，我們需要用 JavaScript 來實現拖動的功能。

var popup = document.querySelector('.popup');
var isDragging = false;
var lastX, lastY;
popup.addEventListener('mousedown', function(e){
isDragging = true;
lastX = e.clientX;
lastY = e.clientY;
});
document.addEventListener('mousemove', function(e){
if(isDragging){
var deltaX = e.clientX - lastX;
var deltaY = e.clientY - lastY;
var rect = popup.getBoundingClientRect();
popup.style.left = rect.left + deltaX + 'px';
popup.style.top = rect.top + deltaY + 'px';
lastX = e.clientX;
lastY = e.clientY;
}
});
document.addEventListener('mouseup', function(e){
isDragging = false;
});

我們首先獲取了要拖動的元素，然后監聽 mousedown、mousemove 和 mouseup 事件，通過判斷 isDragging 變量來判斷當前是否正在拖動。當鼠標按下時，我們記錄下當前的坐標，當鼠標移動時，計算出偏移量并設置元素的 left 和 top 屬性，最后將當前的坐標記錄下來，當鼠標松開時，將 isDragging 設為 false。

綜上所述，我們可以使用 CSS 和 JavaScript 來實現彈出層和拖動功能，這可以提升用戶體驗和視覺效果，更好地實現網頁設計的各種需求。