默认使用普通流技术再页面中布局元素,希望表现与普通流不同,另外两个特性position和float
具体实例
复制代码代码如下:
css定位功能探索
#relative{
position: relative;
top: -10px;
left: 30px;
color: red;
}
#absolute1{
position: absolute;
top: 20px;
left: 360px;
color: blue;
}
#absolute2{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}
#absolute3{
position: absolute;
top: 50px;
left: 360px;
color: blue;
}
#fixed{
position: fixed;
top: 90px;
left: 80px;
}
#float1{
float: left;
margin-left: 50px;
}
#float2{
float: left;
margin-left: 50px;
}
position 值为relative 定位探索1
position 值为relative 定位探索2
position 值为absolute 定位探索3
position 值为absolute 定位探索4
这是position 值为absolute 定位探索4和5的父元素
position 值为absolute 定位探索4
position 值为absolute 定位探索5
这是position 值为absolute 定位探索6和7的父元素
position 值为absolute 定位探索6
position 值为absolute 定位探索7
这是position值为fixed 定位探索1
这是position值为fixed 定位探索2
这是一个普通定位1
这是float定位1
这是float定位2
这是一个普通定位2
运行效果:



