CSS学习之定位

在CSS中对盒子进行布局的方法有这三种：

• 标准流
• 浮动
• 定位

定位使用方法

定位=定位模式+边偏移

定位的分类及用法：

1.静态定位

选择器 {
    position：static;
}

2.相对定位

        选择器 {
            position: relative;
            top: 100px;
            left: 100px;
        }

3.绝对定位

		选择器 {
            position: absolute;
            top: 50px;
            left: 50px;
		}

4.固定定位

        选择器 {
            position: fixed;
            top: 0;
            right: 0;
        }

各个定位方式的特性

1.静态定位

静态定位是定位的默认值，没有定位效果，等同于在border中的none值

2.相对定位

相对定位就是在盒子原来的位置上进行边偏移，但是他还保留着标准流时候的位置

3.绝对定位

1：绝对定位是脱标的

2：绝对定位是按照父级盒子的位置进行边偏移的而且父级盒子也要处于定位状态

3：如果父级盒子没有进行定位，那么他就会按照浏览器的窗口进行边偏移

4：如果父级盒子没有定位，但是他的上上级盒子有定位，那么他会按照上上级的位置进行边偏移，直到往上一直没有定位的上级盒子，就按照浏览器窗口

4.固定定位

1.固定定位是脱标的

2.固定定位与父级盒子没有任何关系，是按照可视浏览器窗口进行边偏移

3.固定定位就是定位到浏览器窗口的某一个位置不动，不会随着滚动条移动他的位置

拓展：绝对定位居中显示

如果一个盒子设置了绝对定位，那么他是无法通过margin: auto;进行居中显示的

但是我们可以通过让他移动位置来实现居中显示

1：先让他的左侧移动到父级盒子宽度的一半

.box {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 200px;
}

2：然后在往回走自身宽度的一半

.box {
    position: absolute;
    left: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
}

注意：

因为在网页中是以盒子的左上角为坐标原点，所以往回走的数值应该是负值