如何优雅的实现这种布局 relative 内 absolute , absolute 溢出外部 relative

Question

类似这种情况，hover 展开的白色弹窗，虽然人家用的不是 relative + absolute

他用的是 fixed + 计算坐标定位

想请教下这种布局有什么更优雅的方式实现？

Answer 1

你应该想问的是为什么第三方都喜欢用fixed+定位来做这种布局而不是元素相对定位布局吧

来分析一下哈

1.就布局出发

很多方式都能实现这种排版，没必要讨论那种更好

2.就体验度出发

排版虽然都一样，体验度还是有区别的，比如要不要考虑浮层吸边、浮层顶部尖角位置、鼠标从头像移入浮层之间浮层的稳定性等等

3.就后期维护于范用出发

这种效果很有可能其他页面、项目也会用到，那么封装成组件的实用性明显要高很多

各方面综合一下，你自己都能分析出来fixed+计算定位适用得多，而且简单。当然，如果就当前项目业务考虑不会有过多使用这种效果而且项目时间比较急，那用什么方式都看个人习惯了

Answer 2

https://ant.design/components/popover-cn/
可以参考antd的气泡卡片