相對(duì)定位
每個(gè)元素在頁面的文檔流中都有一個(gè)自然位置蛛勉。相對(duì)于這個(gè)位置對(duì)元素進(jìn)行移動(dòng)就稱為相對(duì)定位。周 圍的元素完全不受此影響睦柴。
將position屬性設(shè)置為relative時(shí),則開啟了元素的相對(duì)定位毡熏。
元素開啟相對(duì)定位時(shí) 可以通過left right bottom top 四個(gè)屬性值設(shè)置偏移量 對(duì)元素進(jìn)行定位
如果不設(shè)置元素的偏移量坦敌,元素位置不會(huì)發(fā)生改變。
相對(duì)定位不會(huì)改變?cè)匦再|(zhì)? 不會(huì)使元素脫離文檔流 元素在文檔流中的位置不會(huì)改變 具有文檔流的特點(diǎn)
相對(duì)定位會(huì)使元素的層級(jí)提升痢法,使元素可以覆蓋文檔流中的元素狱窘。
絕對(duì)定位
絕對(duì)定位是指元素? 相對(duì)于 HTML元素或者 離他最近的 開啟定位的祖先來定位
當(dāng)將position屬性設(shè)置為absolute時(shí),則開啟 了元素的絕對(duì)定位财搁。
當(dāng)開啟了絕對(duì)定位以后蘸炸,可以使用top、right尖奔、 bottom搭儒、left四個(gè)屬性對(duì)元素進(jìn)行定位。
絕對(duì)定位會(huì)使元素完全脫離文檔流提茁。
絕對(duì)定位的塊元素的寬度會(huì)被其內(nèi)容撐開淹禾。
絕對(duì)定位會(huì)使行內(nèi)元素變成塊元素。
一般使用絕對(duì)定位時(shí)會(huì)同時(shí)為其父元素指定一 個(gè)相對(duì)定位茴扁,以確保元素可以相對(duì)于父元素進(jìn) 行定位铃岔。
固定定位
固定定位的元素會(huì)被鎖定在屏幕的某個(gè)位置上,當(dāng)訪問者滾動(dòng)網(wǎng)頁時(shí)峭火,固定元素會(huì)在屏幕上保持不動(dòng)毁习。
當(dāng)將position屬性設(shè)置為fixed時(shí)智嚷,則開啟了元素的固定定位。
當(dāng)開啟了固定定位以后纺且,可以使用top盏道、right、bottom隆檀、left四個(gè)屬性對(duì)元素進(jìn)行定位摇天。
固定定位會(huì)使元素完全脫離文檔流。
固定定位的塊元素的寬度會(huì)被其內(nèi)容撐開恐仑。
固定定位會(huì)使行內(nèi)元素變成塊元素泉坐。
z-index
當(dāng)元素開啟定位以后就可以設(shè)置z-index這個(gè)屬性。
這個(gè)屬性可以提升定位元素所在的層級(jí)裳仆。
z-index可以指定一個(gè)整數(shù)作為參數(shù)腕让,值越大元素顯示的優(yōu)先級(jí)越高,z-index 值較大的元素會(huì)顯示在網(wǎng)頁的最上層歧斟。
透明
透明度0-1
opacity:0.5;
兼容IE8以下的
filter:alpha(opacity=50);