HTML关于position定位的几种方式及应用示范

position定位

• static 静态定位

静态定位时元素的默认定位方式，也就是没有定位，了解即可

• relative相对定位

相对定位顾名思义，就是元素对于他原本在的位置来说的。也就是说他的参考物是定位前的位置。

特点：

1. 不影响元素的本身特性
2. 元素不脱离文档流
3. 相对于原位置进行偏移

举例说明：

 

通过对第二个方块进行相对定位，让第二个方块右偏移30px，这样的话方块在他原有的位置上向左边移动了30px，也就是在原有的基础上距离右边30px。

  

• absolute绝对定位

绝对定位就是元素以带有定位的父级元素来移动位置，也就是说参照物是最近的带有定位的父级，如果没有的话就参照body。

特点：

1. 元素脱离文档流
2. 行元素支持所有css样式
3. 块元素内容撑开宽高
4. 清楚子级浮动

如下图所示，在上述案例中对方块2进行绝对定位，右偏移30px，此时的结果是方块2对于body右边距离30px，并且方块3较于一开始上移到了原本方块2的位置，元素脱离了文档流

• 固定定位fixed

固定定位的参照物是浏览器的窗口，跟父级元素没有任何的关系，单独使用，并且不随滚动条滚动。

特点：

1. 脱离文档流
2. 清除子级浮动

如图一个例子，利用固定定位来实现浏览器网页中两个固定不随滚动条滚动的矩形。

• 万能居中公式

  在实现效果时，总是会有一些边框永远居中的现象，这时，我们有一个在网页中居中的小技巧，那就是在css中对于div进行一些相应的设置，设置相应的宽高之后，进行绝对定位，左偏移和上偏移都设置成50%，相应的margin-left设置为宽的一半的负数，margin-top设置为高的一半的负数即可实现在网页居中的效果，示例如下：

          width: ;

            height: ;

            background-color: #fff;

            /* 万能居中公式 */

            position: absolute;

            left: 50%;

            top: 50%;

            margin-left: -width/2;

            margin-top: -height/2;