定位

一、为什么需要定位

定位：可以实现将元素放置到网页上任意位置。

如果想实现下面的效果, 只靠浮动是没有办法实现的

像上面这种, 让一个盒子固定在某个位置的情况, 需要使用定位来实现

二、什么是定位

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移

定位模式包括:

绝对定位: posistion: absolute
相对定位: position: relative
固定定位: position: fixed

边偏移包括

边偏移属性	示例	描述
top	top: 80px	顶端偏移量，定义元素相对于其父元素上边线的距离。
bottom	bottom: 80px	底部偏移量，定义元素相对于其父元素下边线的距离。
left	left: 80px	左侧偏移量，定义元素相对于其父元素左边线的距离。
right	right: 80px	右侧偏移量，定义元素相对于其父元素右边线的距离

定位的盒子有了边偏移才有价值。一般情况下，凡是有定位地方必定有边偏移。

三、定位模式详解

1、相对定位

相对定位参考自己在标注流中的位置偏移

特点

相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它

2、绝对定位

绝对定位参考最近的带有定位的父级元素偏移
如果父级没有定位, 就参考浏览器的左上角偏移

如果父元素有定位, 参考父元素的左上角偏移

例子

规律

如果给一个元素设置绝对定位, 一定要记得给其父元素设置相对定位, 否则会出现意料之外的情况

简记: 子绝父相 —— 子级是绝对定位，父级要用相对定位

3、固定定位fixed

固定定位参考浏览器可视窗口偏移

语雀右下角的小工具

四、z-index

Tips:设置元素的堆叠顺序

z-index的规则，那个元素的值大那个就在最上面。

五、练习

1、定位居中（x轴上的居中效果）

transform: translatex(-50%)中的50%为元素自身的50%。

.warpper{
            position: relative;
            top: 50%;
            /* 定位居中：left: 50%   transform: translateX(-50%);*/
            left: 50%;
            transform: translateX(-50%);
            /* margin: 500px auto; */
            width: 561px;
            height: 44px;
            border-radius: 20px;
            box-shadow: 0px 3px 13px 6px rgba(0, 0, 255, .2);
            padding-left: 30px;
        }

2、定位居中（y轴上的居中效果）

.micro{
            position: absolute;
            right: 71px;
            top: 50%;
            transform: translateY(-50%);
        }

3、定位居中（同时居中）

top: 50%;
left: 50%;
transform: translate(-50%,-50%);

动画

一、浏览器解析步骤

（如何做css动画的优化，步骤如下：）

二、keyframes

（1）一种写法是from to

from to写法定义动画trans-auto

横着动

<style>
        *{
            margin: 0;
            padding: 0;
        }
        /* from to写法定义动画trans-auto */
        @keyframes trans-auto {
            from{
                transform: translateX(0%);
            }
            to{
                transform: translateX(100%);
            }
        }
        .box{
            width: 100px;
            height: 100px;
            background-color: red;
            animation: trans-auto 2s linear infinite;
        }
        
    </style>

<body>
    <div class="box"></div>
</body>

斜着动

<style>
*{
    margin: 0;
    padding: 0;
}
/* from to写法定义动画 */
@keyframes trans-auto {
    from{
        transform: translateX(0%);
    }
    to{
        transform: translateX(200%);
    }
}
@keyframes trans-all{
    from{
        transform: translate(0%,0%);
    }
    to{
        transform: translate(200%,200%);
    }
}
.box{
    width: 100px;
    height: 100px;
    background-color: red;
    /* 使用动画：动画名称 动画持续时间 动画算法:linear线性 循环次数1,2,3，infinite循环播放*/
    animation: trans-all 2s linear infinite;
}

</style>

（2）一种写法是百分数

@keyframes up-dowm{
    0%{
        transform: translate(0%,0%);
    }
    20%{
        transform: translate(0%,40%);
    }
    50%{
        transform: translate(20%,-20%);
    }
    70%{
        transform: translate(100%,100%);
    }
}

animation参数

时长: 1s 或者 1000ms

过渡方式:跟 transition 取值一样，如 linear

次数:3 或者 2.4 或者infinite

方向: reverse|alternate|alternate-reverse

填充模式: none forwards backwards both

是否暂停: paused running

5.定位、动画

定位