如何在Flex布局容器后添加定位元素并确保其位置稳定？

Question

在一个flex布局的盒子后面新增一个元素，通过定位的方式设置这个元素，如何保证这个元素始终在前面盒子的后面，不错位
如图，加了一个测试按钮，在富文本的工具栏后面（不是通过wangeditor内置的扩展菜单添加的，因为那样做不满足业务需求），直接通过css定位 的方式，控制按钮位置，但是页面缩放的时候，就会产生错位


下面是dom结构，及代码

希望不管怎么缩放，测试按钮始终在工具栏后面位置， 这个后面

Answer 1

定位肯定不可行的，可以在指定元素后面进行追加元素

const targetElement = document.getElementById('target'); //目标元素
const newElement = document.createElement('button'); //插入元素

在目标元素后面追加新元素targetElement.insertAdjacentElement('afterend', newElement)

//绑定事件
newElement.addEventListener('click', function() {
    alert('按钮被点击了！');
})

Answer 2

如果需求是“始终在 redo 按钮后面”。
那么最好的办法是把按钮追加到 redo 按钮后面，使用组件暴露的接口或者监听组件生命周期适时追加都可以；次一点的方法是监听 redo 相当于浏览器窗口的位置，将新按钮 fixed 到合适位置。

如果需求是“保证这个元素始终在前面盒子的后面”。
那么就很简单：给二者的上一级元素加一个适当的 padding-right，作为新按钮的保留空间就行了。

Answer 3

获取到工具栏的父元素 把按钮append进去

---

之前给video标签操作栏加切换分辨率按钮我也是这样做的

Answer 4

看了下你的布局，有两个解决方案

方案一

工具栏外层有wangeditor类设置相对定位 position: relative

.wangeditor {
    position: relative; /* 让子元素的 absolute 参照这个容器 */
    display: flex;
    align-items: center;
}

按钮 absolute 定位，相对于 .wangeditor

.update-desc-btn {
    position: absolute;
    top: 50%;  
    right: -60px; /* 根据实际情况调整 */
    transform: translateY(-50%);
    z-index: 10;  /* 确保层级不被遮挡 */
}

方案二

如果工具栏没有外层 .wangeditor，可用JS 动态获取工具栏的位置，并调整按钮位置：

function updateButtonPosition() {
    const toolbar = document.querySelector('.toolbar'); // 工具栏
    const button = document.querySelector('.test-btn'); // 按钮

    if (toolbar && button) {
        const rect = toolbar.getBoundingClientRect();
        button.style.left = rect.right + 'px'; // 让按钮始终贴着工具栏
        button.style.top = rect.top + 'px';
    }
}

// 监听页面缩放 & 重新计算按钮位置
window.addEventListener('resize', updateButtonPosition);
updateButtonPosition();