超强的纯 CSS 鼠标点击拖拽效果( 三 ) _生活百科

而像是这样，是一个更为复杂的布局内容展示（当然下面展示的也比较简单，实际中可以想象成任意复杂结构内容）：

文章插图
如果将这个结构，扔到上面的 g-resize 中：
<div class="g-resize"> <div class="g-content"></div></div>那么就会因为设置了 overflow: scroll 的原因，将完全看不到，只剩下一小块：

文章插图
为了解决这个问题，我们得修改原本的 DOM 结构，另辟蹊径。
方法有很多，譬如可以利用 Grid 布局的一些特性。当然，这里我们只需要巧妙的加多一层，就可以完全解决这个问题。
我们来实现这样一个布局：
<div class="g-container"> <div class="g-resize"></div> <div class="g-content"></div></div>解释一下上述代码，其中：

g-container 设置为绝对定位加上 display: inline-block，这样其盒子大小就可以由内部正常流式布局盒子的大小撑开
g-resize 设置为 position: relative 并且设置 resize，负责提供一个可拖动大小元素，在这个元素的变化过程中，就能动态改变父容器的高宽
g-content 实际内容盒子，通过 position: absolute 定位到容器的右下角即可

看看完整的 CSS 代码：
.g-container { position: absolute; display: inline-block;}.g-resize { content: ""; position: relative; width: 20px; height: 20px; border-radius: 50%; resize: both; overflow: scroll; z-index: 1;}.g-content { position: absolute; bottom: -80px; right: -80px; width: 100px; height: 100px; background: black; pointer-event: none; &::before { content: ""; position: absolute; width: 20px; height: 20px; background: yellow; border-radius: 50%; transition: .3s; }}.g-container:hover .g-content::before { transform: scale(1.1); box-shadow: -2px 2px 4px -4px #333, -4px 4px 8px -4px #333;}.g-resize::-webkit-resizer { background-color: transparent;}下图中，你看到的所有元素，都只是 g-content 呈现出来的元素，整个效果就是这样：

文章插图
是的，可能你会有所疑惑，下面我用简单不同颜色，标识不同不同的 DOM 结构，方便你去理解。

红色边框表示整个 g-container 的大小
【超强的纯 CSS 鼠标点击拖拽效果】用蓝色矩形表示设置了 g-resize 元素的大小
关掉 ::-webkit-resizer 的透明设置，展示出 resize 框的可拖拽 ICON

.g-container { border: 3px solid red;}.g-resize { content: ""; background: blue; resize: both; overflow: scroll;}.g-resize::-webkit-resizer { // background-color: transparent;}看看这个图，整个原理基本就比较清晰的浮现了出来：