HTML5 之 定位总结

今天看了定位，记一记笔记。

定位position，由边偏距和定位模式组成。

边偏距，4个，分别是top、bottom、left、right：后面可以%，还可以px等。

重点记一下定位模式：静态定位，相对定位，绝对定位，固定定位。

静态定位static：也是默认定位，符合标准流。据说其唯一的作用就是消除其他的定位。

相对定位relative：每次移动都以自己左上方的点为基准移动；                                                                                                                                          占有原来的位置。

绝对定位absolute：通过边偏移来移动位置，但它完全脱标，完全不占位置。                                                                                                                     1. 父级元素无定位时，则子级元素的绝对定位以浏览器当前的屏幕为准；                                                                                            2. 父级元素有定位时，则子级元素的绝对定位以最近的已经定位（相对、绝对、固定）的父级元素进行定位。

固定定位fixed：跟父级元素没有关系，只跟浏览器有关；                                                                                                                                              固定定位完全脱标，不占位置。

最好的状态就是子绝父相：子级元素用绝对定位，父级元素用相对定位。

两个小问题：1. 绝对定位是完整脱标的，浮动不算完整脱标，因为浮动起来以后，下面的盒子往上移，但是盒子里面的内容（图片                            文字）是不能随着盒子一起浮动起来的，会按照标准流排列在下方。                                                                                              2. 加上absolute定位或者是浮动float的盒子，使用margin：0 auto；让盒子居中时，会失效。此时可以使用以下方法                             来让盒子水平\垂直居中。

                        选择器{

position：absolute；

left：50%；            margin-left：-width/2；

top：50%；              margin-top：-height/2；

                                     }