你不知道的CSS fixed定位小技巧
原创
你不知道的CSS fixed定位小技巧
原创
前言
你好，我是喵喵侠。我平时有逛网站的习惯，看到网站有一些不错的内容，就会去点赞回复评论，同时也会去体验网站的各种功能。在这过程中，我经常会发现一些产品体验问题或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 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
![[CSS] 对定位的深入理解与应用](https://developer.qcloudimg.com/http-save/yehe-11029094/3daec60c075c65e1f72fd47a4b2a2bd4.png)
腾讯云开发者
