css 元素定位

• 静态定位

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。上面的话翻译成白话： 就是网页中所有元素都默认的是静态定位哦！ 其实就是标准流的特性在静态定位状态下，无法通过边偏移属性（top、bottom、left或right）来改变元素的位置。

PS： 静态定位其实没啥可说的。

静态定位唯一的用处： 就是 取消定位。 position: static;

• 相对定位

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。如下图所示，即是一个相对定位的效果展示：

image.png

1.相对定位最重要的一点是，它可以通过边偏移移动位置， 但是原来的所占的位置，继续占有。
2.其次，每次移动的位置，是以自己的左上角为基点移动（相对于自己来移动位置）

• 绝对定位

绝对定位是将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。
常用原则：
（1）子绝父相
子级使用绝对定位，父级使用相对定位
(2）子绝父绝
子级使用绝对定位，父级使用绝对定位
绝对定位的盒子居中
普通的盒子是左右margin 改为 auto就可， 但是对于绝对定位就无效了，绝对定位的盒子也可以水平或者垂直居中，有一个算法。
1.首先left 50% 父盒子的一半大小
2.然后走自己外边距负的一半值就可以了 margin-left

注意： 绝对定位最重要的一点是，它可以通过边偏移移动位置，但是它完全脱标，完全不占位置。

• 固定定位fixed

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

代码效果:

 


    

        对照标签
    



    相对定位



    绝对定位


    绝对居中


fix定位
    

效果展示：

image.png

调整浏览器大小后的效果

image.png

定位模式	是否脱标	是否可以使用偏移量	移动位置基准
static静态定位	否	否	默认模式顺序排列
relative相对定位	是，占有位置	是	相对自身默认位置
adsoulute绝对定位	是，不占有位置	是	相对父级（祖级）位值
fixed固定定位	是，不占有位置	是	相对浏览器