定位

定义

position属性指定了元素的定位类型

其中，绝对定位和固定定位会脱离文档流

设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom

相对定位

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

xxxxxxxxxx
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position: relative;
    left: 100px;
}

绝对定位

xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>

xxxxxxxxxx
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

固定定位

xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>

xxxxxxxxxx
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:fixed;
    left: 50px;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
}

温馨提示

设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档

xxxxxxxxxx
<div class="container">
    <div class="box"></div>
</div>

xxxxxxxxxx
.container{
    width: 300px;
    height: 300px;
    background-color: #666;
    position: relative;
    left: 200px;
}
.box{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
}

Z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

xxxxxxxxxx
<div class="box1"></div>
<div class="box2"></div>

xxxxxxxxxx
.box1{
    width: 200px;
    height: 200px;
    background-color: red;
    position:absolute;
    z-index: 2;
}
.box2{
    width: 300px;
    height: 300px;
    background-color: green;
    position:absolute;
    z-index: 1;
}

实时效果反馈

1.下列哪种属性设置不会脱离文档流：

A 相对定位

B 绝对定位

C 固定定位

D 浮动

答案

1=>A