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

有不少人说使用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';
      });
    }
相关推荐
夏幻灵4 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
Lvan的前端笔记4 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习4 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs194055 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风6 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn7 小时前
框架性能优化
前端
回眸&啤酒鸭9 小时前
【回眸】OpenSwarm 多智能体协作系统实战指南
大数据·前端·人工智能
用户69371750013849 小时前
2026,程序员的时代拐点到了
android·前端·后端
大龄秃头程序员9 小时前
一次 iBeacon + BLE 无感解锁方案的实现记录
前端
小兔子9 小时前
Python 的 GIL 与 free-threading:3.13 之后「去 GIL」走到哪一步了
前端