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
效果如下: