CSS是一種強大的網頁設計語言，可以幫助我們輕松實現各種效果。其中一個常見的效果就是拖拽div層。下面來介紹一下如何使用CSS實現這個效果。

首先需要一個HTML結構，我們可以創建一個div元素，然后使用CSS設置它的寬度、高度、背景顏色等樣式。

<div class="box"></div>

為了實現拖拽效果，我們需要在CSS中設置該div元素為絕對定位，并且設置鼠標光標為拖拽形狀。

.box {
position: absolute;
width: 200px;
height: 200px;
background-color: blue;
cursor: move;
}

接下來，使用JavaScript代碼實現拖拽效果。我們可以為該div元素添加mousedown、mouseup、mousemove等事件監聽器，然后在事件處理函數中實現拖拽效果。

let obj = document.querySelector('.box');
let disX, disY;
obj.addEventListener('mousedown', function (e) {
disX = e.clientX - parseInt(obj.style.left);
disY = e.clientY - parseInt(obj.style.top);
document.addEventListener('mousemove', mousemoveHandler);
document.addEventListener('mouseup', mouseupHandler);
});
function mousemoveHandler(e) {
obj.style.left = e.clientX - disX + 'px';
obj.style.top = e.clientY - disY + 'px';
}
function mouseupHandler() {
document.removeEventListener('mousemove', mousemoveHandler);
document.removeEventListener('mouseup', mouseupHandler);
}

上述代碼中，我們首先使用querySelector方法獲取到該div元素，然后在mousedown事件處理函數中記錄下鼠標點擊時的坐標，并添加mousemove和mouseup事件監聽器。在mousemove事件處理函數中，根據鼠標的移動距離，動態地調整該div元素的left和top位置。在mouseup事件處理函數中，移除mousemove和mouseup事件監聽器。

最后，我們就實現了一個簡單的拖拽效果。需要注意的是，該效果只是用來介紹如何使用CSS和JavaScript實現拖拽效果的基礎代碼，要實現更復雜的效果，代碼還需要進行相應的修改和優化。