侧栏显示悬浮内容的一种模拟实现

前面我写了一篇文章：悬浮的内容直接显示在侧边栏，里面提到了我想要的一种功能，将悬浮内容显示在侧栏。

当被告知短期内不会被实现后，我决定自行调整，以达到想要的效果。

现在把我的实现方法放出来，如果想要拥有同款效果的朋友可以跟着我的脚步操作。

先来段演示

1）演示中除了点击「钉住」按钮和「关闭」按钮以外，没有再点击过鼠标了，全是悬浮的效果。

2）要实现这样的效果只需要一个前提：处于左右双编辑栏状态（主要是分成左右两侧，左侧内容不重要）

3）其实代码实现也十分简单：

3.1）找到并打开主题文件，theme.css 或者 custom.css

3.2）在「末尾」加入这段代码：

 .block__popover.block__popover--move.block__popover--open{
    min-height: 100% !important;
    max-width: 50%; 
    left: 0 !important;
    top: 0 !important;
} 
​

3.3）解释：

• 设置最小高度为「100%」
• 设置最大宽度为「50%」
• 设置距离「左 0 上 0」（已知 position 是 absolute）
• 关键点：!important 必不可少，如果没有，「left」和「top」会被覆盖，导致无效。

4）问题：

• 虽然显示位置的问题解决了，但是位置也因此被固定死了，你将再也无法通过拖动来改变页面的位置。同时悬浮页面的相对层级仍旧是无法改变的，是按顺序一层层叠加的，因而这种方案不适宜多个「钉住」页面交叉查看的场景。

5）结束：

• 其实这只是一种模拟实现，通过 CSS 调整宽高位置以达到相类似的效果，并没有实际用到侧边栏或达到侧边栏的效果，但是对于我来说，已经差不多够用了。