定位: position
也是一個屬性position,當元素設置定位後,可以精確的設置在網頁中一個具體的座標位置,定位是 一個完全脫離標準流的狀態,不會影響周圍的元素。
相對定位: position: relative;
也叫佔位定位,當元素設置相對定位後,在標準流的位置依然存在,可以通過4個偏移量設置元素的位置,此時的參考點是元素在當前標準流的位置。
偏移量:
left: 正值向右,負值向左
right: 正值向左,負值向右
top: 正值向下,負值向上
bottom: 正值向上,負值向下
當left,right,top,bottom同時存在時,left和top優先
讓left不起作用 ： left:auto;
絕對定位: position: absolute;
是一個完全脫離標準流的狀態,默認參考點,
left和top是以網頁的左上
right和bottom是以當前窗口的第一屏,
四個偏移量
是以網頁的初始包含塊爲參考點
絕對定位元素設置寬高起作用
相對定位和絕對定位配合使用: 元素在設置絕對定位後,默認參考點是body,此時給元素的父元素設置
相對定位,絕對定位的參考點轉向父元素
口訣:
子絕父相: 子父指的是標籤是嵌套關係,子元素是絕對定位,設置偏移量,父元素是相對定位
絕對定位的參考點: 設置絕對定位的元素會找離它最近的加了相對定位的祖先元素
定位的層級:
層級是一個屬性z-index,層級的取值範圍是整數,默認層級是0,當層級相同時,後寫的標籤會壓在先寫標籤的上面,當層級不同時,誰的層級高,誰在上面,層級是負數時,要低於標準流的元素。
定位元素的水平垂直居中：
元素定位的水平居中:left:50%, margin-left:負的自身寬度的一半
元素定位的垂直居中:top:50%, margin-top:負的自身高度的一半
透明度:取值範圍是0-1之間的小數,：
元素的背景和內容一起透明 opacity: 0.5;
rgba: css3中的屬性 background: rgba(0,0,0,0.5);
不佔位隱藏 display: none;
佔位隱藏 visibility: hidden;
佔位顯示 display: block;
不佔位顯示 visibility: visible;