固定定位概述
CSS的”固定”定位功能可不是闹着玩儿，你的元素就像粘在页面上一样，不管你如何刷新或滑屏都原地不动~为达到这一目的，我们需要用到四大法宝：top、left、right和bottom，它们就能控制元素的方位。这个技巧挺管用的，那就让我们深入探讨下这些属性究竟应该如何发挥作用！
top属性详解
顶部属性就是让你把握元素和浏览器顶部边界的距离滴~咱们可用像素、百分比或者Em值来制定。比如说，给某元素加上top=20像素，它就能离浏览器顶部有20像素咯~这么弄好后，不论怎么移动网页，元素位置都会乖乖不变哟～
实际上，TOP属性也能用百分比搞定。比如让某物件的top设置为50%的话，它就在浏览器窗口的正中央咯。这样分配版面可让网页看起来更别致，不论是大屏还是小屏幕都妥妥的，超级给力
left属性详解
就像搞定Top那样，Left也可以操纵元素到浏览器左边的距离。无论你用像素、百分比还是em这样的单位，都能轻松搞定。比如把中间那个物体放到窗口左边缘的50%处，那就是控制在浏览器宽度的中间位置咯~
别忘了随便拿个 left 属性就能搞定布局，这不，左边就有个稳定不变的导航栏。还有个小技巧就是结合 CSS 的其他属性，比如z-index 和 transform，整得网页美美的。
<pre class='brush:css;toolbar:false;’>#fixed-element {
position: fixed;
top: 20px;
left: 50%;
}
right和bottom属性应用
除了常见的left和top属性外，别忘了还有right和bottom可以帮你让元素在浏览器中动起来。有了他们，就不用再担心元素会跑歪~
用right跟bottom两个属性，咱们可以轻松搞定各种好看的网页布局。例如，想做个响应式网页？巧妙利用这俩属性，保证各种设备上显示得美美的！
固定定位示例代码解析
直接来看个例子，加深对定向定位和它那些属性怎么用的印象。
html 这是一个固定定位示例
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
}
“`css
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
background-color:#f1f1f1;
padding: 20px;
}
小伙伴们注意！这儿有个酷炫的DIV叫“fixed-element”，被我们固定定位到浏览器窗口顶部边缘20像素处，然后左右对称哟~别看它小，还有个淡淡滴背景色（#f1f1f1）和内边距（20像素），看着就很舒服呀~
这段代码看完你就会用top和left调整网页里的东东位置了哦～还有那个固定定位超实用哒，分分钟布局妥妥地简单便捷。
结合其他CSS技巧
别只会用Top、Left、Right和Bottom！css里还有好多神奇的技巧可以让网页变得炫酷起来。比如说Transition和Transform，它们能让滚动什么的变成动感十足的动画呢；然后来说说Media query，就是那个让网站看起来好舒服的Reactive布局工具，不管屏幕大小怎么变都能hold住；最后说到Flexbox和Grid两种新的布局方式，既好用又快手，让你省时省力地上轨道。
#fixed-element {
position: fixed;
top: 20px;
left: 50%;
background-color: #f1f1f1;
padding: 20px;
}
Scroll down to see the effect of fixed positioning.
This is a fixed element
This element will stay in its position even when scrolling.
总的来说，学会稳固不动的定位和掌握一些CSS技巧就可以让网页设计变得容易多了。学会灵活使用这个知识点，不断锻炼自己，积攒经验，将来工作起来会得心应手！
总结与展望
看完这篇关于 CSS 固定定位道理的文章，你是不是感觉有种茅塞顿开的感觉？可别小看这个常见的布局小技巧，它其实在网页设计里起到了很大作用！
这里就说到这儿，咱们想想怎样才能利用好固定定位，把网页设计得更有看头。有什么困扰吗？分享出来瞧瞧，听听大家的看法
下次做项目时，别忘了看看这篇文章，学习学下CSS里面怎么用固定定位。祝你们的项目顺利成功！
评论0