定位``` 相对自身位置进行偏移relative： ``` ``` 绝对定位absolute： absolute 绝对定

相对自身位置进行偏移relative：

<style>
        *{margin:0;padding:0;}
        .box{
            width: 100px;
            height: 100px;
            border:1px solid red;
            /* 相对于自身原来的位置 向左移动了100px 向上移动了100px */
            left:100px;
            top:100px;
            position: relative;
        }
    </style>
    <body>
    <div class="box"></div>
    <div class="box"></div>
    <!-- position 默认值是static 标准流布局展示的 -->
    <!-- relative 相对自身原来位置进行偏移 -->
</body>

绝对定位absolute：
absolute 绝对定位 脱离了标准的文档流
设置绝对定位之后，前面的会被后面的盖住
<!-- 内部是绝对定位，父盒子也是绝对定位，就会以父盒子为基准进行定位 -->
    <!-- div1的父盒子不是绝对定位，那么他就会以body为基准进行定位 -->
    <!-- 如果child的父盒子不是绝对定位，那么child会以body为基准进行定位 -->

relative与absolute相结合

<div style="width: 100px;height: 100px;background-color: blueviolet;">   
    </div>
    <!-- 因为父元素是absolute 子元素也是absolute，子元素会以父元素为基准 -->
    <!-- 但是父元素使用绝对定位，脱离了文档流，所以标准流布局会显示再绝对定位的下面
    造成混乱 -->
    <!-- 所以在工作中，我们采用relative和absolute相结合的方法进行布局和定位 -->
    <div style="position:relative;top:0;left:0;width: 100px;height: 100px;background-color: red;">
        <div style="position:absolute;top:10px;left:10px;width: 40px;height: 40px;background-color: yellow;"></div>
    </div>

练习1
使用relative制作花样链接卡

<style>
        .box{
            width: 320px;
            height: 320px;
            border:2px solid red;
        }
        .box a{
            display: block;
            width: 100px;
            line-height: 100px;
            text-align: center;
            color:#fff;
            text-decoration: none;
            background-color: #FF87FD;
            position: relative;
        }
        .box a:nth-child(1){
            top:10px;
            left:10px;
        }
        .box a:nth-child(2){
            top: -90px;
            left:210px;
        }
        .box a:nth-child(3){
            left:10px;
            top:10px;
        }
        .box a:nth-child(4){
            left:210px;
            top:-90px
        }
        .box a:nth-child(5){
            left:110px;
            top:-290px
        }
        /* 偏移设置： left、right、top、bottom 
 */
       
        /* 前面几个div相对自身移动之后，位置仍让保留
        所以后面的div没有覆盖他们的位置 */
    </style>
    <body>
    <div class="box">
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
        <a href="">链接5</a>
    </div>
</body>

练习2
使用absolute制作花样链接卡
<style>
        *{margin:0;padding:0;}
        .box{
            width: 320px;
            height: 320px;
            border:2px solid red;
            position: absolute;
            left:10px;
            top:10px;
            margin:30px;
        }
        .box a{
            display: block;
            width: 100px;
            line-height: 100px;
            text-align: center;
            color:#fff;
            text-decoration: none;
            background-color: #FF87FD;
            position: absolute;
            /* 设置了absolute最好设置left和top来表明位置 */
            top:0px;
            left:0px;
        }
        .box a:nth-child(1){
            top:10px;
            left:10px;
        }
        .box a:nth-child(2){
            top: 10px;
            left:210px;
        }
        .box a:nth-child(3){
            left:10px;
            top:210px;
        }
        .box a:nth-child(4){
            left:210px;
            top:210px;
        }
        .box a:nth-child(5){
            left:110px;
            top:110px
        } 
        
    </style>
    <body>
    <div class="box">
        <a href="">链接1</a>
        <a href="">链接2</a>
        <a href="">链接3</a>
        <a href="">链接4</a>
        <a href="">链接5</a>
    </div>