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

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

还有不少人认为父级元素使用relative,子元素(fixed)的宽度设为100%就可以,这也是错误的。使用relative的观点是把absolutefixed认为是一样的,其实不是。区别在于:

  • 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';
      });
    }
相关推荐
初圣魔门首席弟子1 分钟前
AI Agent 核心原理:工具调用(Function Calling)完整工作流程详解
前端·数据库·人工智能
CodeSheep7 分钟前
又是梁文锋,有点猛啊。
前端·后端·程序员
qq_4221525711 分钟前
视频转 GIF 工具怎么选?2026 年动图制作方案与画质参数对比
javascript·vue.js·音视频
陈老老老板18 分钟前
如何用 Bright Data Web Scraper API + Coze 搭建 Reddit 行业情报聚合 Bot(2026 实战指南)
前端·人工智能
恋猫de小郭24 分钟前
由于 iOS 26 的键盘变化,Flutter 又要重构键盘区域逻辑
android·前端·flutter
怕浪猫30 分钟前
Electron 开发实战(十五):实战项目|从零搭建桌面即时通讯(IM)应用
前端·javascript·electron
喜欢踢足球的老罗37 分钟前
破解 Chrome 扩展的「两世界难题」:MV3 下的 ISOLATED 与 MAIN World 桥接之道
前端·chrome
一拳一个娘娘腔38 分钟前
【第七期】漏洞攻防-前端篇:XSS 与 CSRF —— 当浏览器成为攻击者的“肉鸡”
前端·xss·csrf
不吃鱼的羊1 小时前
DaVinci配置NVM模块
前端·javascript·网络