你不知道的CSS fixed定位小技巧

原创

喵喵侠

修改于 2025-01-13 17:01:42

1682

文章被收录于专栏：喵喵侠的社区活动征文喵喵侠的社区活动征文喵喵学前端

前言

你好，我是喵喵侠。我平时有逛网站的习惯，看到网站有一些不错的内容，就会去点赞回复评论，同时也会去体验网站的各种功能。在这过程中，我经常会发现一些产品体验问题或bug，今天正好发现了一个，找到了解决方案，还学到了知识，特此写一篇文章记录下。

故事经过

今天我逛腾讯云开发者社区的时候，看到一篇文章，觉得很不错，欣然点赞。点赞后发现文中有一处地方逻辑似乎不通，于是我打开了「某AI插件」的功能，想问问这段话的表述有没有问题。

这个插件的功能很强大，回答很不错，给出了专业的建议，但这不是重点，重点是，插件对话框是在右侧出现的，占据了网页的空间，导致社区的文章页面的点赞工具栏，出现了错位。如下图所示：

我第一反应这个插件引起来的，首先排查是不是插件的问题。于是我点开了其他的也有类似点赞功能网站，比方说稀土掘金，发现别的网站是正常的。

然后我又打开审查元素，进入开发者模式，仔细看了下页面的布局和结构，发现这个工具栏是和文章内容容器是同级的，而且用的是fixed布局，left是百分比计算。而插件是在网页右侧插入了一个区域，父容器是用的flex布局，导致左侧文章区域位置被挤压，而 fixed是相对视口定位，就看起来跑到了文章的右边，显示错位了。

点赞工具栏关键的css是这样的：

.cdc-suspend-pill {
    position: fixed;
    top: 158px;
    left: calc(50% - 788px);
    z-index: 1;
}

而我打开“另一个技术社区”，同样用了插件，发现没问题，审查元素看，是这样的：

看到这里我就很好奇，为什么“另一个技术社区”的左侧区域也被挤压，同样fixed定位，为什么工具栏还是会贴着内容盒子，相对定位呢？直到我发现它没有写left，而是用margin-left获得了类似绝对定位的效果，关键代码如下：

.article-suspended-panel[data-v-67be6428] {
    position: fixed;
    margin-left: -7rem;
    top: 140px;
    z-index: 2;
}

原理分析

一开始我觉得fixed定位元素不在浏览器左上角，而是在文章区域不太理解为什么，直到我问了“某AI助手”后，明白了其中的原理。

通常我们认为fixed的定位是基于浏览器视口来定位，殊不知视口定位的前提，是设置了定位方向和数值才会有的效果，比方说设置了top、left。如果没有设置，那么这个元素的位置就会在文档流中原本的位置，同时也是脱离文档流的状态，就好像在父盒子上又盖了一层一样。

这里我放上一个简单demo，可以尝试在本地或者在线运行一下，效果一下子就出来了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Positioning Demo</title>
    <style>
        .container {
            width: 80%;
            margin: 0 auto;
            background-color: #f0f0f0;
            padding: 20px;
            border: 1px solid #ccc;
        }

        .fixed-div {
            position: fixed;
            top: 0;
            background-color: #ffcc00;
            padding: 10px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="fixed-div">Fixed Div</div>
        <p>这是一个包含固定定位元素的父容器。</p>
        <p>固定定位元素只设置了 top: 0; 属性，没有设置 left、right 或 bottom 属性。</p>
        <p>观察固定定位元素的水平位置，它会保持在文档流中的初始位置。</p>
    </div>
</body>
</html>

效果图如下：

解决方案

看到了掘金用的不写left、设置margin-left的方式实现，那么腾讯云开发者社区也可以用同样的思路解决。只是腾讯云开发者社区的工具栏层级写在了文章区域的外面，要实现同样效果就需要写到里面。

那么实现步骤就两个：

把.cdc-suspend-pill先剪切后到.cdc-global__main这个元素里面，如下图操作：
去掉left属性，加一行margin-left: -5em;。

.cdc-suspend-pill {
    position: fixed;
    top: 158px;
    /* left: calc(50% - 788px); */
    z-index: 1;
    margin-left: -5em;
}

修改后，文章浏览页默认效果图如下：

打开插件的效果图如下：

这样就搞定了！实际修改只需要改页面的结构和样式就好了！

注意：我在实际演示的过程中，发现有时候打开插件窗口会触发一个工具栏隐藏效果，我把这个去掉了，这样问题才能够更好的复现出来。问题已经反馈给官方，坐等修复。

结语

一次无意间的bug发现，引起了我的好奇心，通过一步步的探索，不光找到了问题产生的原因，还找到了巧妙的解决方案，巩固了以往遗漏的知识点，并整理成了文章。整个过程十分有意思，后续我会持续输出类似的文章，希望你能喜欢。

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

position