前端开发学习——CSS定位

一、定位的基本介绍

1、网页常见的布局方式

1.标准流

1. 块级元素独占一行——垂直布局
2. 行内元素/行内块元素一行显示多个——水平布局

2.浮动

1. 可以让原本垂直布局的块级元素变成水平布局

3.定位

1. 可以让元素自由的摆放在网页的任意位置
2. 一般用于盒子之间的层叠情况 

2、定位的常见应用场景

1. 可以解决盒子与盒子之间的层叠问题（定位之后的元素层级最高，可以层叠在其他盒子的上面）
2. 可以让盒子始终固定在屏幕的某个位置

二、定位的基本使用 

1、使用定位的步骤 

1.设置定位方式

• 属性名：position
• 常用属性值：

定位方式	属性值
静态定位	static
相对定位	relative
绝对定位	absolute
固定定位	fixed

 2.设置偏移量

• 偏移值设置分为两个方向，水平和垂直方向各选一个使用即可
• 选取的原则一般是就近原则 

方向	属性名	属性值	含义
水平	left	数字+px	距离左边的距离
水平	right	数字+px	距离右边的距离
垂直	top	数字+px	距离上边的距离
垂直	bottom	数字+px	距离下边的距离

 三、静态定位

 介绍：静态定位即标准流

代码：position:static;

特点：写上代码与不写无异

四、相对定位

 介绍：自恋型定位，相对于自己之前位置进行移动

代码：position:relative;

特点：

1. 需要配合方位属性实现移动
2. 相对于自己原来位置进行移动 
3. 在页面中占位置——没有脱标

应用场景：

1. 配合绝对定位组CP（子绝父相）
2. 用于小范围的移动

 /* 相对定位 */
position: relative;
left: 100px;
top: 200px;
/* 如果left和right都有，以left为准，垂直方向以top为准 */
right: 200px;
bottom: 400px;
/* 1.占有原来的位置 (不脱标)
2.仍然具有标签原有的显示特点
3.改变位置参考自己原来的位置 */

 五、绝对定位

1、定位介绍

介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

代码：position:absolute;

特点：

1. 需配合方位属性实现移动
2. 默认相对于浏览器可视区域进行移动
3. 在页面中不占位置——脱标

应用场景

1. 配合绝对定位组CP（子绝父相）

 /* 绝对定位
先找已经定位的父级，如果由这样的父级就以这个父级为参照物进行定位
有父级，但父级没有定位，以浏览器窗口为参照物进行定位 */
position: absolute;
left: 0;
top: 0;
/* 1.脱标，不占位
2.改变标签的显示模式特点：在一行共存，宽高生效 */

2、子绝父相

    <div class="father">
        <div class="son">
            <div class="sun"></div>
        </div>
    </div>

        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .son {
            /* 相对，绝对 */
            /* 父级相对定位，自己绝对定位——子绝父相 */
            
            position: relative;
            right: 100px;

            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
        .sun {
            position: absolute;
            right: 20px;
            top: 30px;

            width: 200px;
            height: 200px;
            background-color: green;
        }
 /* 绝对定位查找父级的方式：就近找定位的父级，如果逐层查找不到这样的父级，就以浏览器窗口定位 */

3、子绝父相—居中

需求：使用子绝父相，让子盒子在父盒子中水平居中（父子元素任意宽度下都能实现）

使盒子在浏览器中位置居中的css代码如下：

            /* 1.绝对定位的盒子不能使用左右margin auto居中 */
            position: absolute;
            /* margin: 0 auto; */

            /* left：50% 使盒子移动到浏览器中间偏右的位置 */
            left: 50%;
            /* 让盒子往左移盒子宽度一半的距离 */
            /* 因为浏览器宽高都没有范围，margin-right取值为多少都不会使盒子向右移 */
            margin-left: -200px;
            top: 50%;
            margin-top: -200px;

            width: 400px;
            height: 400px;
            background-color: pink;

4、位移居中

 需求：如果盒子的宽高度为奇数，则上述方法无法使其完全居中。

代码：transform: translate(-50%,50%);

            position: absolute;
            left: 50%;
            top: 50%;
            /* 位移：自己宽度高度的一半 */
            transform: translate(-50%,50%);
            
            width: 301px;
            height: 300px;
            background-color: pink;

六、固定定位

介绍：死心眼型定位，相对于浏览器进行定位移动

代码：position:fixed;

特点：

1. 需配合方位属性实现移动
2. 相对于浏览器可视区域进行移动
3. 在页面中不占位置—脱标

应用场景：

1. 让盒子固定在屏幕中的某个位置 

            /* 固定在网页的右上角 */
            position: fixed;
            right: 0;
            top: 0;

            width: 200px;
            height: 200px;
            background-color: black;

 七、元素的层级关系

1、元素层级问题

不同布局方式元素的层级关系：

• 定位 > 浮动 > 标准流

不同定位之间的层级关系：

• 相对、绝对、固定默认层级相同
• 此时HTML中写在下面的元素层级更高，会覆盖上面的元素（后来者居上）
• z-index：整数；取值越大，显示顺序月考上，z-index的默认值是0 （z-index必须配合定位使用）