【css】如何让 fixed 元素具有父节点同样的宽度？

亮子AI2025-12-10 10:17

有不少人说使用inherit ，当然这是没用的。

还有不少人认为父级元素使用relative，子元素（fixed）的宽度设为100%就可以，这也是错误的。使用relative的观点是把absolute和fixed认为是一样的，其实不是。区别在于：

absolute定位是相对于最近的relative；
fixed定位是相对于视口（viewport）！

有效的方法是通过javascript获取父级元素宽度，然后设置fixed宽度。下面是一个实际代码例子：

ts 复制代码

    // Set fixed toolbar width
    const editorOutside = document.querySelector('.tiptap-editor-outside');
    if (editorOutside) {
      const width = editorOutside.clientWidth;
      const toolbars = document.querySelectorAll('.tiptap-editor-outside .fixed-toolbar');
      toolbars.forEach((toolbar) => {
        (toolbar as HTMLElement).style.width = width + 'px';
      });
    }