CSS定位

CSS定位

首先CSS的定位机制有普通流，浮动和绝对定位。

• position:static 静态定位 （默认情况下的定位，是没有效果的。）
• position:relative 相对定位（相对于原来的位置进行定位，占用原文档流的空间）
• position:absolute 绝对定位（相对于定位了的父级或者body进行定位，一般在父级使用relative进行定位，子级相对于父级进行绝对定位，不占用原文档流空间）
• postion:fixed 相对于浏览器窗口定位

属性偏移量

• left 距离左侧边距的距离
• top 距离上侧边距的距离
• bottom 距离下侧边距的距离
• right 距离右侧边距的距离

<style>
.d1{
    background-color: red;
    border: 1px solid ;
    width: 70%;
    height: 1000px;
}
.d2{
    background-color: black;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
.d3{
    background-color: pink;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
.d4{
    background-color: yellow;
    border: 1px solid ;
    width: 20%;
    height: 150px;
}
</style>
<div class="d1">
    <div class="d2"></div>
    <div class="d3"></div>
    <div class="d4"></div>
</div>

原效果：

给父级加上绝对定位，给第一个子div加上相对定位，给第二个子div加上绝对定位。

实现效果：

可以看到第一个div相对于原来的位置向右偏移了300px,但原来的位置还在，
由于父级进行了绝对定位，第二个div就可以相对于父级进行定位，但原位置被后一个div覆盖。

根据原理，如果父级没有进行定位，第二个div会根据body定位，我们把父级的偏移换成margin，绝对定位的自己偏移量为left:0,top:0

效果如下：