微信读书，设置笔记栏置顶，z-index以及 top 无效

Question

微信读书，自定义css时，设置笔记栏置顶，z-index以及 top 无效
且设置position时，系统预设的 flex 存在紊乱的情况，请问这种情况如何处理？

Answer 1

方案来自 梦想橡皮擦 狂飙组基于 GPT 编写的 “程秘”

---

• 在微信读书中自定义 CSS 时，设置笔记栏置顶、z-index、top 等样式属性无效，可能是因为微信读书的内部实现方式导致的。微信读书的界面是基于 Web 技术实现的，但是具体的实现方式只有微信读书的开发团队才知道，对于我们来说，只能通过一些常规的 CSS 技巧来尽可能地模拟出效果。

• 在这种情况下，可以考虑使用 position: fixed 属性来实现笔记栏置顶。position: fixed 会让元素脱离文档流，相对于浏览器窗口固定位置，不会随着页面的滚动而移动。因此，通过设置笔记栏的 position 属性为 fixed，然后再调整其 top、left、right、bottom 等属性，可以实现将笔记栏置顶的效果。

• 另外，如果在设置 position: fixed 后发现页面布局混乱，可能是因为使用了 flex 布局导致的。这时可以考虑将相关元素的 display 属性设置为 block 或 inline-block，或者通过其他方式来模拟 flex 布局的效果。如果仍然无法解决，可以考虑在设置 position: fixed 的元素外面套一层容器，通过在容器中设置 display: flex 来实现布局效果。