1.什么是fixed定位
CSS里的“fixed”定位就是让元素位置不因网页滚动而动摇，不管视窗怎么变，它都能停留在屏幕上看得见的那部分。用这个特性，有些特效就能被很好地做出了。只要把元素的“position”设为“fixed”，效果就出来！
2. fixed定位的语法和特点
记住要用 fixed 定位的话，你得先把元素的 position 属性设成fixed，这样它就能稳坐在浏览器上不乱跑了。就像 absolute 那样，虽然也是离开文档流了，但 fix定位还能让它活动活动身子。再配合上 top、bottom、left 跟 right 几个特性，你完全可以随心所欲地管理它在浏览器窗口里的位置！
top、bottom、left和right这些属性怎么用？
玩儿转fixed定位，你只需掌握好top、bottom、left和right这四大法宝！它们其实就是指元素离浏览器窗口的上下左右边有多远。只要把这几个数值调得妥妥当当，想让哪个元素飘到哪里就飘到哪里~不过别忘了，你并不用次次都全用，依据实际情况挑选适合的就行。
<pre class="brush:css;toolbar:false”>选择器｛position:fixed;｝
4.固定盒子与其他元素重叠问题
有时候遇到的麻烦就是，用了fixed定位后，你那个“屹立不倒”的盒子总是被别的东西给遮住了。想要防止这个，你得把它放在最上面去，也就是改变一下z-index的大小。这样既能解决掉盒子被盖住的困扰，还能让整个网页看起来顺眼多了。
5. fixed定位应用场景
固定定位就像是给某些页面元素粘了“订书钉”，让它们即使页面滚动也纹丝不动地待在原地。比如你平常看到的网页导航栏、广告悬浮框这些就是用这个办法实现一直停留在视线范围内的功能。合理利用它能让我们的页面看起来更顺眼，操作上也更直观方便！
6.如何实现在主内容右侧进行固定显示
position:fixed; top:像素值; bottom;像素值; left:像素值; right:像素值;
要把元素放在右边不动？用下CSS试试看！首先，让它挪过去，别懒得动的硬是向左。方法就是设定元素的属性float变成right，或者在Flex布局里给它个命令align-self设成flex-end，这样它就能跑到右边去了。而且，让你惊讶的是，就算页面往下滚也不会乱跑！
7. fixed与absolute相比较
虽然固定和绝对定位都能让元素跑出文档流动做点点移动，但他们俩还是有点儿小不同！最大的区别就在于，固定元素相对浏览器窗口定坐标，而绝对定位就得靠它最近的非静态的大佬爸爸。所以，选用哪个定位方式，得视具体情况来定。
8. fixed定位注意事项
h2.pos_abs {
position: fixed;
left: 100px;
top: 120px
}
p{
height: 100px;
background-color: palegoldenrod;
}
p.p2{
margin-top:120px ;
}
这是带有固定定位的标题
相对于浏览器窗口来对元素进行定位
相对于浏览器窗口来对元素进行定位
用fixed布局时要留意一些小细节，比方说内容太长就容易把fixed元素盖住啦；还有就是手机屏幕大小不同时，fixed元素看起来也可能有点怪哟。所以，咱们做项目时候要活学活用fixie布局，还要考虑怎么应对这些兼容性和适配性的问题。
9.总结
这篇文章帮你搞清楚了CSS里的那个 fixed 属性，你知道它是什么吗？规矩又是啥？好用不坏的地方在哪儿？用的时候又要注意点什么？看完这些，你就能把网页布局弄得漂亮极了，也能让用户觉得舒服多了！别小看这个 fixed 定位，它在实战里可是个大杀器！
。
评论0