代码也不多，如果你了解了上面的内容，下面的代码将非常好理解：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content"> Lorem ipsum dolor sit amet consectetur?</div></div>完整的 CSS 代码如下：
body { position: relative; padding: 10px; background: url("背景图"); background-size: cover;}.g-container { position: absolute; display: inline-block;}.g-resize { content: ""; position: relative; width: 20px; height: 20px; resize: both; overflow: scroll; z-index: 1;}.g-content { position: absolute; bottom: -160px; right: -180px; color: rgba(#000, 0.8); background-image: linear-gradient( 160deg, rgb(255, 222, 30) 50%, rgb(255, 250, 80) ); width: 200px; height: 180px; pointer-event: none; text-align: center; font-family: "marker felt", "comic sans ms", sans-serif; font-size: 24px; line-height: 1.3; padding: 1em; box-sizing: border-box; &:before { content: ""; position: absolute; width: 20px; height: 20px; top: 0; left: 0; border-radius: 50%; background-image: radial-gradient( at 60% 30%, #f99, red 20%, rgb(180, 8, 0) ); background-position: 20% 10%; cursor: pointer; pointer-events: none; transform: scale(0.8); box-shadow: -5px 10px 3px -8.5px #000, -1px 7px 12px -5px #000; transition: all 0.3s ease; transform: scale(0.8); }}.g-container:hover .g-content::before { transform: scale(0.9); box-shadow: -5px 10px 6px -8.5px #000, -1px 7px 16px -4px #000;}.g-resize::-webkit-resizer { background-color: transparent;}我们通过上述的技巧，实现了一个仅仅使用 CSS 实现的自由拖拽的便签贴 。我们可以自由的将其拖拽到任意地方 。看看效果：
当然，我们可以再配合上另外一个有意思是 HTML 属性 -- contenteditable 。
contenteditable 是一个 HTML TAG 的属性，表示元素是否可被用户编辑 。如果可以，浏览器会修改元素的部件以允许编辑 。
简单修改一下 DOM 结构：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content" contenteditable="true"> Lorem ipsum dolor sit amet consectetur?</div></div>此时 ， 元素不仅可以被拖动 ， 甚至可以被重写，感受一下：
推荐阅读
- 【博学谷学习记录】超强总结，用心分享|MySql连接查询超详细总结
- TDengine的数据建模?库、表、超级表是什么？怎么用？
- 超详细 R及R Studio下载安装教程
- Springboot 之 Filter 实现 Gzip 压缩超大 json 对象
- 微信怎么发文字和图片朋友圈（微信朋友圈发纯文字)
- 咋发朋友圈纯文字（简短干净文字控)
- 华为手机自由截屏怎么截（华为怎么滚动截超长图)
- 努力一周，开源一个超好用的接口Mock工具——Msw-Tools
- 如何发微信朋友圈（微信怎么发纯文字)
- 两道超有意思的 CSS 面试题，试试你的基础