CSS可拖拽div层是网页设计中常用的功能之一。使用这一功能可以使页面更加灵活，并且增加用户交互体验。下面我们来讲解如何实现这一功能：

<div id="drag_target" draggable="true">
<p>我可以被拖拽</p>
</div>

如上所示，我们需要把要拖拽的div层的draggable属性设置为true。然后，我们还需要写一些JavaScript代码来实现拖拽效果：

var drag_target = document.getElementById('drag_target');
drag_target.addEventListener('dragstart', function(event) {
event.dataTransfer.setData('text/plain', null);
});
document.addEventListener('dragover', function(event) {
event.preventDefault();
});
document.addEventListener('drop', function(event) {
drag_target.style.left = event.pageX + 'px';
drag_target.style.top = event.pageY + 'px';
});

以上代码实现了拖拽事件的处理。当我们通过鼠标拖动div层时，会触发dragstart事件，该事件会在拖拽开始时被触发。同时，我们还需要在document元素上绑定dragover和drop事件来实现拖拽到某个位置时的效果。

最后，我们可以在CSS中对拖拽的div层进行样式的设置：

#drag_target {
width: 200px;
height: 100px;
background-color: #ccc;
position: absolute;
top: 100px;
left: 100px;
}

如上所示，我们可以设置div层的宽高、背景颜色、定位属性等样式来美化我们的页面。

在实现CSS可拖拽div层的时候，还需要注意一些细节问题。例如，我们需要在drop事件中调用preventDefault()方法来阻止默认事件的发生。

总之，通过以上步骤，我们就可以很快地实现CSS可拖拽div层的功能了。这一功能在网页设计中应用广泛，可以使页面更加交互化和生动化。