大家初学前端时，是不是觉得CSS里的绝对定位特牛逼？想怎么调就怎么调网页元素位置~不过不能乐得太早，实际上这玩意儿也有点小麻烦。今天咱们就来唠叨唠叨绝对定位的优点缺点以及正确用法！希望对你们有所启发
屏幕适配的挑战
做软件的时候，老是要注意屏幕大小和分辨率，比如想要某个东西在特定地方显示的话，就得顾及到它周围的环境是否和谐，但是，如果显示器的刷新率不够高，那个玩意儿就很容易跑到别的地儿或者变得模糊不清，这时候就赶紧动动手，让每个设备都看起来顺心。解决这个问题其实也不难，你只需要掌握一种叫做“媒体查询”的技巧，根据不同设备的特点来随时调整元素的位置和屏幕的适应性，这样就能轻松搞定！
有时候，那个使用绝对定位的东西老是跑出来，其他的东西就碰不到了。虽然这挺好用，能做个小窗口、精确导航栏或者弹出框什么的，但是用多了可就不行，元素挤在一起，挡住了别的内容，页面变得乱七八糟，用户体验也变差了。所以我们编程序时要注意，千万不能让绝对定位把整个布局都弄乱了。
技巧分享：灵活运用绝对定位
1.相对定位的应用
我跟你说，相对定位就是个办公神器，用了它，文档布局就不容易乱套。如果你会用，还可以调整元素位置，页面看起来就干净多了。我平时在工作里主要靠绝对定位和相对定位这两招，它们使布局更高级，超好用！
遇到特殊设计要求，我经常会用到两种方法：绝对定位和相对定位。比如有些东西需要放在固定地方，不能乱动，那我就先把它们放进带相对定位的容器里，然后利用绝对定位把它们钉死，这样它们就只能老老实实在原地待着了。这种办法对于复杂布局特别有效，想怎么变位置、换展示效果都行！
3.百分比定位的运用
我更喜欢用百分比来做尺寸调整，这样元素就能自己跑到合适的框里了，看着多自由！做起布局也不费劲儿，响应式设计什么的根本不在话下，无论手机还是电脑上都能用得舒坦。
4.合理运用z-index属性
亲们，你们知道吗？要想让某个东西在网页中高调亮相，就得学会巧妙地玩转z-index这个小技巧。别看它看起来不起眼，实际上，这就是你控整个页面元素排名和位置的法宝，重要内容随时可以压倒一切，如弹窗和下拉菜单等。不过，可不能乱来，免得出错。所以嘞，咱们还是小心为妙，别太贪心了
css的绝对定位太给力了！玩法多，看着就霸气！不过，使用这种方法时得留个心眼儿。比如，你得学会怎么跟相对定位、百分比定位还有z-index属性搭配合适，这样才能让绝对定位给你的网站加分。这么一搭配，无论是什么设备还是布局，都能轻松搞定，提高用户体验。下次做网页前端设计时，记得把这些技巧用起来，做出既好看又好用的页面哈~
评论0