相对定位
1、相对定位relative 参考的元素是自己,没有脱离标准文档流,不会让出位置,位置还是在原来,
2、结合absolute实现子绝父相
绝对定位
1、绝对定位absolute 参考元素是它的父亲或者祖先最近的一个设置定位的元素
2、设置为绝对定位后,会脱离标准文档流,让出位置给其他的元素
3、一般用在轮播图,父视图上有其他固定的子视图,
4、父元素或者祖先必须有一个设置了定位,并结合left top 或者bottom right等 才会起作用。
固定定位
1、固定定位参考点是浏览器窗口
2、结合left top bottom right参考浏览器窗口设置固定位置
--------注意点-------
1、绝对定位一般跟设置相对定位的父元素或者祖先元素配合使用
.banner {
position: relative;
width: 400px;
height: 300px;
/* 水平居中 左右margin设置为auto 根据子元素的宽度自适应 */
margin: 30px auto;
}
.banner ul li{
display: none;
}
.banner ul li img{
position: absolute;
left: 0px;
top: 0px;
width: 400px;
height: 300px;
}
2、这里提一嘴浮动效果float:left
浮动也是脱离标准文档流,让位置给其他元素,使用场景一般是元素不固定,从做到右排列或者从右到左排列,配合clearfix:after 添加一个末尾的display为block的盒子来清除浮动带来的影响从而撑开父元素的高度。
如果知道子元素的个数且只在一行内显示,那就固定父元素的额高度,不用做清除浮动带来的影响了。