position属性的概述
搞定网页设计，免不了要捣鼓些东西，这可得靠我们头顶上有个叫“position”的大神来搞定。别看它只有4种姿势（static、relative、fixed、absolute），瞧好了，简直就是网页元素的万能大师！无论你想怎么玩弄，统统都能满足你。听好了，我现在就来教大家如何运用这些神奇的技巧。
static：默认定位
别绕弯子了，你懂了吗？position默认值其实就是static！虽然没明着跟你说，但所有元素都是静待文档布局中，稳如泰山，谁都没法乱动。一般情况下，不用特意设成static，这本来就是默认属性！
relative：相对定位
下一招很轻松，咱们把这个属性搞成”relative”，就是相对定位。这个办法挺有趣的，因为你可以用top、right、bottom、left来随便摆弄元素的位置。但是，元素依然会按照原来的顺序排好队，只是要增加或减少一点偏移量，这不就更容易做小调整了！
<pre class='brush:css;toolbar:false;’>.relative-box {
position: relative;
top: 30px;
left: 50px;
}
fixed：固定定位
说到元素定位，固定(fixed)就是指无论怎样拉伸或快速滑动屏幕，它们都稳如泰山地待定在那里，感觉就像是粘在了浏览器上。那么如何让它们安分守己不乱动？很简单，只需要给 top、right、bottom和left这四个值挨个赋值就能搞定！
absolute：绝对定位
咱再说说position这个话题，来聊聊absolutely，这可是大家熟知的”绝对定位”。说白了，它就像小朋友找家一样，需要找好自己的坐标。要是找不到不错的参照物咋办？不用怕，网页里的body大佬就能帮上忙。想要把定位好的东西摆哪儿，直接设top、right、bottom和left这些参数妥妥的！
.fixed-box {
position: fixed;
bottom: 20px;
right: 10px;
}
transform属性与绝对定位结合
除了使用上下左右这些按键来控制位置外，记得试试变形这个功能~还以，假如要把选中的东西移到屏幕中央，加上translate(-50%,-50%)这句代码就行。这样看来舒心，编起程来也轻松多了！
绝对定位在网页设计中的应用
哎呀妈这绝对定位真心好用，在网页设计里超有用！特别是当你想让那些飘忽不定的浮动对象、弹窗和其他上下文信息固定下来时，简直是神器。就是这么回事，给要定位的元素加上top、right、bottom和left的值，这样它们就可以待在应该待的位置。比如，搞一个导航栏装饰什么的，子菜单先放在父菜单上方，然后利用下个秘密武器z-index，调整它们的显示优先级，瞬间完成任务！
.absolute-box {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
z-index属性与层叠顺序管理
嘿朋友们，Z-Index这东西就是个调前后显示顺序的利器！跟数数儿排座次差不多，数字越大作用越大，让咱们的页面看着更有条理。
注意事项与最佳实践
虽绝对定位似乎挺好使的，但是得小心使用它。因为它不会动换，乱搞的话可能让站点整个弄乱或破坏排版。所以，希望大家把每一个元素放到正确位置上，这样站点就更整洁好看了。
总结与展望
读完这篇你就明白，做网页设计，最重要的就是懂得利用CSS的position和top、right这些属性来搭建页面布局，当然还少不了transform和z-index这些实用小窍门。掌握好它们，各种各样的布局问题都能解决，让网站变得更美美的哟~
学会用CSS的定位属性来搞定你心中的各种布局，让你的设计变得有趣又漂亮！别害怕尝试，朋友们，加油加油！
评论0