1.定位模式,:relative,absolute,fixed
2.边偏移:top,right,bottom,left
3.子绝父相: 子绝对定位父相对定位
4.相对定位跟自己原先位置做偏移(不脱标),绝对定位是在父级元素里做偏移(脱标),固定定位是定于浏览器的可视区位置(脱标)
5.定位次序的叠放:页面出现很多盒子定位,哪个靠上哪个靠后,z-index=1 来定义。数值越大越靠上。
![](https://img.haomeiwen.com/i11157698/b7a767b24c7e635d.png)
![](https://img.haomeiwen.com/i11157698/c3242839bcc59b12.png)
![](https://img.haomeiwen.com/i11157698/9f6aa5d4df52de66.png)
![](https://img.haomeiwen.com/i11157698/4bfbcf1270cf07a6.png)
![](https://img.haomeiwen.com/i11157698/bf610ab26eea7c5c.png)
![](https://img.haomeiwen.com/i11157698/6de32368ec4188a9.png)
![](https://img.haomeiwen.com/i11157698/e697dfcd657c597d.png)
![](https://img.haomeiwen.com/i11157698/bcde9ba8c45b33e2.png)
定位拓展:
![](https://img.haomeiwen.com/i11157698/38d12efef4d9124e.png)
![](https://img.haomeiwen.com/i11157698/6d92a53c8a3e5bcb.png)
![](https://img.haomeiwen.com/i11157698/8f7dac4bcf91b1c0.png)
网页布局的总结:
![](https://img.haomeiwen.com/i11157698/41ef7736a777aca1.png)
本文标题:position定位及拓展和网页布局总结2022-08-03
本文链接:https://www.haomeiwen.com/subject/fvfewrtx.html
网友评论