css:position 屬性

很多情況下,我們需要控制更多元素的位置,切超過了浮動(dòng)所能提供的范圍,這時(shí)候我們就需要使用“position”屬性對元素進(jìn)行定位,position提供了四種定位方式:

? 一、relative

?相對定位,相對于自身位置,使用top,left,right,bottom 屬性改變元素的位置。

二、fixed

?固定定位,相對于瀏覽器窗口進(jìn)行定位,并且不會隨滾動(dòng)條進(jìn)行滾動(dòng),始終保持在窗口的某個(gè)位置。

三、absolute

?絕對定位,會脫離文檔流,當(dāng)存在父級元素且父級元素有相對定位時(shí),相對于父級元素的位置進(jìn)行定位,否則相對于頁面的主體進(jìn)行定位。

四、static

元素都具有position屬性,默認(rèn)值是static,static屬性不接受位置屬性(top,right,left,bottom)值得影響,一般情況下不使用,當(dāng)需要消除某元素的其他定位時(shí),可以使用static屬性。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • CSS的position總是屬性很容易讓人弄混~ 為了仔細(xì)區(qū)別它們,所以今天總結(jié)一下CSS的position屬性~...
    fehysunny閱讀 3,081評論 0 7
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,154評論 1 92
  • 原文地址:http://luopq.com/2015/11/15/css-position/ position是C...
    IT程序獅閱讀 8,115評論 0 16
  • position屬性干嘛的? 定位的。絕對定位,相對定位 如何定位? 舉個(gè)例子 這個(gè)結(jié)果如下??梢钥吹骄嚯x左側(cè),上...
    鴨梨山大哎閱讀 944評論 0 2
  • 其實(shí)這個(gè)問題困擾過我很久,我大學(xué)畢業(yè)進(jìn)入體制內(nèi)工作,在辦公室一呆就是四年,看過很多文字材料,也寫過一些,...
    怪咖Eric閱讀 213評論 0 0

友情鏈接更多精彩內(nèi)容