Postion定位的使用
一、概要
position属性有四个值：static、relative、absolute、fixed。
staitc：默认值，默认效果
relative：相对定位，使用较多
absolute：绝对定位，使用较多
fixed：绝对定位，较少使用
二、效果
网络上有关css定位的实验较多，在这里就不例举代码说明，只介绍相关结论。
staitc：
默认值，显示的是默认效果，无需其他说明。
relative：
相对定位，当div使用该属性后，该div并不会脱离文档流，占有div原有的位置。如果再使用在使用position=relative的同时又指定top与left属性，则该div会以原先的位置为基点进行偏移定位。
在该图片中，灰色部分的div position设置relative，left与top的偏移量分别设置为50px，故现在的div是以未进行relative设置原先的div进行偏移的。所以偏移量也就是红色矩形，长宽均为50px；
absolute
该属性最为常用，且常常配合这relative一起使用
absolute为绝对定位，div使用该属性后，脱离文档流，就像设置浮动一样。如果设置absolute的同时又设置top与left属性，则向上找，找到第一个position不为static的父div为基准设置偏移
在此实例中，棕色部分设置了relatvie，天蓝色部分设置了absolute，子div的top与left是以棕色部分的div为基准进行偏移。红色矩形部门长宽均为40px；如果父div没有设置relative，在此示例中则以body为基准进行偏移。如下所示
以body为基准进行偏移，红色矩形，为偏移量，长宽均为40px;
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/75436.html