Element-UIDrawer：右下角绝对定位

本文介绍了如何解决Element-UI Drawer隐藏后，内部元素无法使用绝对定位固定在右下角的问题。由于Drawer隐藏时采用`display: none;`，导致`position: fixed;`失效。文章提供了一种利用Vue的`teleport`功能，将需要定位的元素渲染到body元素下的解决方案，并通过`v-if`指令控制元素的显示与隐藏，最终实现Drawer隐藏后，元素依然保持在页面右下角的效果。 该方法有效解决了Element-UI Drawer隐藏后绝对定位失效的难题，并附带了具体的代码示例。

Element UI Drawer 隐藏后元素绝对定位到右下角的解决方案

项目中，需要在 Drawer 隐藏后，其内部的 div 元素以绝对定位的方式悬浮在页面右下角。然而，Element UI Drawer 默认隐藏方式为 display: none;，导致 position: fixed; 和高 z-index 属性失效。

解决方法是使用 Vue 的 teleport 功能，将需要绝对定位的元素渲染到 body 元素下。当 Drawer 隐藏时，该元素仍然可见并保持其位置。

实现代码如下：

关键在于：

• 使用 teleport to="body" 将 floating-div 元素移动到 body 元素内。
• 使用 v-if="visible" 确保只有在 Drawer 可见时才渲染 floating-div 元素，避免隐藏后仍然显示。
• floating-div 元素使用 position: fixed; 实现绝对定位，并设置 bottom 和 right 属性控制其位置。 z-index 确保其显示在其他元素之上。

通过此方法，即使 Drawer 隐藏，floating-div 元素仍会保持在页面右下角。 请注意调整 bottom 和 right 属性值以适应您的页面布局。

今天关于《Element-UIDrawer：右下角绝对定位》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！