-
静态定位
静态定位是所有元素的默认定位方式，当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
当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。
代码效果:
<style type="text/css">
div{
font-size: 40px;
width: 100px;
height: 100px;
}
#contrast{
color: yellow;
}
#first{
background: blue;
position: relative;
left: 100px;
top: 100px;
}
#abslout{
background: red;
position: absolute;
left: 100px;
top: 100px;
}
#abslouteCenter{
background: green;
position: absolute;
left: 50%;
/*margin-left: 50%;*/
}
#fixedtest{
background: #445344;
position: fixed;
left: 40px;
top: 20px;
}
</style>
<body>
<div id="contrast" style="background:rgb(255,165,0)">
对照标签
</div>
<div id="first">
相对定位
</div>
<div id="abslout">
绝对定位
</div>
<div id="abslouteCenter">
绝对居中
</div>
<div id="fixedtest">
fix定位
</div>
</body>
效果展示：
image.png
调整浏览器大小后的效果
image.png
| 定位模式 | 是否脱标 | 是否可以使用偏移量 | 移动位置基准 |
|---|---|---|---|
| static静态定位 | 否 | 否 | 默认模式顺序排列 |
| relative相对定位 | 是，占有位置 | 是 | 相对自身默认位置 |
| adsoulute绝对定位 | 是，不占有位置 | 是 | 相对父级（祖级）位值 |
| fixed固定定位 | 是，不占有位置 | 是 | 相对浏览器 |
网友评论