【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';
      });
    }
相关推荐
兆子龙15 分钟前
当「多应用共享组件」成了刚需:我们从需求到模块联邦的落地小史
前端·架构
Qinana16 分钟前
从代码到智能体:MCP 协议如何重塑 AI Agent 的边界
前端·javascript·mcp
Wect26 分钟前
LeetCode 130. 被围绕的区域:两种解法详解(BFS/DFS)
前端·算法·typescript
不会敲代码129 分钟前
从入门到进阶:手写React自定义Hooks,让你的组件更简洁
前端·react.js
用户54330814419431 分钟前
拆完 Upwork 前端我沉默了:你天天卷的那些技术,人家根本没用
前端
洋洋技术笔记32 分钟前
Vue实例与数据绑定
前端·vue.js
Marshall15132 分钟前
zzy-scroll-timer:一个跨框架的滚动定时器插件
前端·javascript
明月_清风2 小时前
打字机效果优化:用 requestAnimationFrame 缓冲高频文字更新
前端·javascript
明月_清风2 小时前
Markdown 预解析:别等全文完了再渲染,如何流式增量渲染代码块和公式?
前端·javascript
掘金安东尼3 小时前
用 CSS 打造完美的饼图
前端·css