相對定位
1获列、相對定位relative 參考的元素是自己谷市,沒有脫離標準文檔流,不會讓出位置击孩,位置還是在原來迫悠,
2、結(jié)合absolute實現(xiàn)子絕父相
絕對定位
1巩梢、絕對定位absolute 參考元素是它的父親或者祖先最近的一個設置定位的元素
2创泄、設置為絕對定位后艺玲,會脫離標準文檔流,讓出位置給其他的元素
3鞠抑、一般用在輪播圖饭聚,父視圖上有其他固定的子視圖,
4搁拙、父元素或者祖先必須有一個設置了定位秒梳,并結(jié)合left top 或者bottom right等 才會起作用。
固定定位
1箕速、固定定位參考點是瀏覽器窗口
2酪碘、結(jié)合left top bottom right參考瀏覽器窗口設置固定位置
--------注意點-------
1、絕對定位一般跟設置相對定位的父元素或者祖先元素配合使用
.banner {
position: relative;
width: 400px;
height: 300px;
/* 水平居中 左右margin設置為auto 根據(jù)子元素的寬度自適應 */
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的盒子來清除浮動帶來的影響從而撐開父元素的高度犀忱。
如果知道子元素的個數(shù)且只在一行內(nèi)顯示募谎,那就固定父元素的額高度,不用做清除浮動帶來的影響了阴汇。