盒子定位

一、定位有哪幾種

float浮動定位
position:absolute;靜態(tài)定位
position:absolute;絕對定位
position:relative;相對定位
position:fixed;固定定位
position: static; 靜態(tài)定位

二、四種定位的特性
? flaot定位 相對于父元素容器, 后面緊鄰的則會受到浮動的影響, 這種定位使得元素脫離文檔流
? static(靜態(tài)定位) 照文檔的書寫布局自動分配在一個合適的地方,這種定位方式用margin來改變位置,對left、top、z-index等設(shè)置值無效,這種定位不脫離文檔流。
? position:relative; 可以通過設(shè)置left、top等值,使得指定元素相對其正常的位置進(jìn)行偏移,這種定位不脫離文檔流;
? position:absolute;這種定位通常設(shè)置父元素為relative定位來配合使用),在沒有父元素的條件下,它的參照為body,該方式脫離文檔流;
fixed(固定定位)相對于整個文檔的,只需設(shè)置它相對于各個方向的偏移值,就可以將該元素固定在頁面固定的位置,脫離文檔流;

三、詳細(xì)解釋相對定位

對某元素設(shè)置了相對定位,那么首先這個元素他會跟其它的元素一樣,出現(xiàn)在文檔流中它該出現(xiàn)的位置,然后,我們可以設(shè)置它的水平或垂直偏移量,讓這個元素相對于它在文檔流中的位置的起始點進(jìn)行移動。有一點要注意, 在使用相對定位時,就算元素被偏移了,但是他仍然占據(jù)著它沒偏移前的空間。這里值得注意的一點是:偏移可不是邊距,跟邊距是不一樣的。

四、詳細(xì)解釋絕對定位

被設(shè)置了絕對定位的元素,在文檔流中是不占據(jù)空間的,如果某元素設(shè)置了絕對定位,那么它在文檔流中的位置會被刪除,那這個元素到哪去了呢?它浮了起來,其實設(shè)置了相對定位relative時也會讓該 元素浮起來,但它們的不同點在于,我們可以通過z-index來設(shè)置它們的堆疊順序

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

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

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,168評論 1 92
  • 一、定位 解決頁面上盒子與盒子之間的層疊問題 1、元素的定位屬性 邊偏移:通過邊偏移屬性top、bottom、le...
    舊游舊游閱讀 1,055評論 3 0
  • 學(xué)習(xí)建議 定位、浮動是 CSS 核心知識點,必須熟練掌握。 1.文檔流的概念指什么?有哪種方式可以讓元素脫離文檔流...
    饑人谷_任磊閱讀 1,159評論 0 3
  • CSS 定位 CSS有三種基本的定位機(jī)制:普通流,浮動,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,978評論 0 15
  • 初中時的我們年少單純,所關(guān)心的不過是學(xué)習(xí)、玩耍。那時我學(xué)習(xí)好,可以幫他寫作業(yè),他人緣好哥們一群,經(jīng)常帶著我一起玩。...
    陌上花開請緩緩歸矣閱讀 523評論 0 0

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