关于这个问题我是琢磨了很久,懂了又忘记了,本人记性比鱼可能好那么一点,所以写下了.两种定位的定义我一直不是很明白,关键还是要在应用中理解,如有误,请指正,谢谢
经过长时间的琢磨,一定要将不应用定位时的页面和应用定位时的页面比较,特别是相对定位,因为加入一些元素后自身的位置变化大,不然,你不知道如何来的。
这里我们只对有两种定位同时出现的情形举例.
当两种定位同级时:绝对定位相对于浏览器左上角移动,而相对定位则相对于自己初始位置的位移,其实这种情形和独立时一样的,只是更容易混淆。
![CSS中相对定位和绝对定位的应用 - lovejuangoon - 在云计算端](http://img2.ph.126.net/K72xRW2l_opAWOw07Oa-qQ==/6597262181191775862.jpg)
![CSS中相对定位和绝对定位的应用 - lovejuangoon - 在云计算端](http://img1.ph.126.net/8M0B18d8i9b4K2kRTyWKdw==/6597396321610216471.jpg)
当两个定位存在父子关系时,有两种情况,绝对定位是父级,相对定位是父级两种,其实两种情况也是一样的,因为子元素都会在完成父属性的定位后再做自己的定位移动;子元素在恰当的位移后可以覆盖父元素,设置 Z-INDEX 值对结果没有影响(我多次测试发现没有变化);前者经常用在和滚动条一起移动的块元素中。
![CSS中相对定位和绝对定位的应用 - lovejuangoon - 在云计算端](http://img8.ph.126.net/RUTCP6se1VcxQOXocgAG8g==/6597424908911781068.jpg)
![CSS中相对定位和绝对定位的应用 - lovejuangoon - 在云计算端](http://img2.ph.126.net/cKdV_ibSDqbhHGauj5nURA==/6597466690353636362.jpg)
左下角的小剪刀被覆盖了一部分,当你修改Z-INDEX 值时,它不会变化。