一、position布局的基本原理
大家都知道，响应性布局和 CSS 的 position 属性分不开。我们可以选用static（默认的）、relative、absolute和fixed这四种方式。如果用STATIC的话，就是按照常规的习惯摆来摆去；RELATIVE，就是稍微挪动位置，其它地方没事儿；到了ABSOLUTE，那可真是自由自在，只要找到个不是STATIC的对象当作基点就能玩起来了！最后说说FIXED，简直就是钉子户，不管我们翻页、滑动页面，它始终就在那儿。
做网页的时候，咱们得把div定位好全部公开就定个固定的地方，要秀起来就用绝对坐标。搞定这事儿以后，你在网站布局上肯定能更得心应手了！
二、position布局的实践技巧
1.结合媒体查询和百分比布局
你是不是希望网页能自适应布局看着更舒服？那就赶紧学习这两招吧——媒体查询和比例布局。这样你就可以解决页面不平的问题了，无论手机多大或多小，布局都会变得很合适。再利用媒体查询为你各种尺寸的手机设置相应的CSS样式，不论什么设备，你都会拥有颜值爆棚且优美的网站页面。
2.使用相对单位
你知道吗？咱们在做网页设计时要选能用百分比的单位，可以随着父容器或者手机尺寸变化！这样不论什么样的设备都能正确显示，看起来也很整齐美观哟。而用绝对值可能就容易混乱甚至溢出来，实在不方便~
3.合理设置媒体查询
媒体查询相当重要，可以帮咱搞定响应式设计，根据设备调整页面风格。先了解下各类设备常见屏幕大小，然后专门给它们做匹配CSS编码，这样每个元素就能美美的了。另外代码要尽量简明易懂~
4.注意浏览器兼容性
在编CSS的时候要小心了，浏览器对代码的理解各有不同，可能导致网页外观前后不统一。别担心，还是很好解决滴，多TRY几次看看，锁定出问题的浏览器，然后快速修复就行。到时不论用啥浏览器展示都美美哒！
三、position布局的注意事项
1.父元素定位属性设置
记住，要用相对位置来给爹地（父元素）定个位，不然宝贝儿们（子元素）会把这篇文章当自家后院，那不就一团糟了！
position: relative; width: 100%; height: auto; top: auto; left: auto; right: auto; bottom: auto;
2.避免元素重叠和溢出
有时候用position布局，元素太多太拥堵，页面看着乱七八糟。这时候，只需给每一个元素设置个适合的z-index值，页面马上就清晰好读了！
3.测试与调整
position: absolute; width: 50%; height: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%);
记住，我们做响应式设计时要考虑设备的大小和方向，不然手机上看起来会不太舒服。之后布置好布局可以试试看效果，根据实际体验来调教一下CSS，这样页面就能完美适应各种设备辣~
4.合理使用position布局
position: fixed; width: 200px; height: 200px; top: 50%; left: 50%; transform: translate(-50%, -50%);
记住，理解好position布局非常重要！直接用绝对或固定定位可能会让你头痛不已，抱憾终生。所以，制作网页时候，还是要根据具体情况判断哪种策略比较合适。这个小难题，我们可以用Flexbox和Grid这两大工具轻松解决，这样就能设计出好看的响应式页面了喔。
评论0