定位

定位

相对定位

<div class="box1" >1</div>
<div class="box2">2</div>
<div class="box3">3</div>

body{
    font-size: 30px;
}
.box1,.box2,.box3{
    width: 200px;
    height: 200px;
}
.box1{
    background-color: orange;
}
.box2{
    background-color: #bfa;
}
.box3{
    background-color: red;
}
 /* 定位
    通过定位，可以将元素摆放到页面的任意位置
    使用postition属性来设置定位 
    可选值
        static 默认值，元素是静止的灭有开始定位
        relative 开启相对定位
        absolute 开启绝对定位
    相对定位:当元素的position属性值设置为relative时则开启了元素的相对定位
    相对定位的特点:
        position: relative;
        1.元素开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
    偏移量(offset)：当元素开启了定位以后，可以通过偏移量来设置元素的位置(像margin)
        top(定位元素和定位位置上面的距离)、bottom、left、right
*/
.box2{
    background-color: #bfa;
    position: relative;
    left: 200px;
    top: -200px;
}

绝对定位

<!-- 子绝父相 position:absolute
绝对定位相对于其包含块进行定位，而在绝对定位中，他的包含块就是距离它最近的开启了定位的祖先元素
-->
 <div style="height: 20px;"></div>
<div class="box1">1
    <div class="box2">2
        <div class="box3">3</div>
    </div>
</div>

.box1{
    width: 400px;
    height: 400px;
    background-color: orange;
    position: relative;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: red;
    /* position: relative; */
}
.box3{
    width: 200px;
    height: 200px;
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
}