摘要:脫離文檔流首先設置絕對定位后,會脫離文檔流,因此不占據(jù)空間。相對于誰定位相對于它在普通文檔流中的位置。脫離文檔流后可以做什么絕對定位的框與文檔流無關,所以它們可以覆蓋頁面上的其它元素。
脫離文檔流?
首先div設置absoluted絕對定位后,div會脫離文檔流,因此不占據(jù)空間。
與div設置為relative相對定位不同,相對定位實際上被看作普通流定位模型的一部分。
絕對定位的元素的位置相對于最近的已定位祖先元素,如果元素沒有已定位的祖先元素,那么它的位置相對于最初的包含塊。根據(jù)用戶代理的不同,最初的包含塊可能是畫布或 HTML 元素。
relative相對于誰定位?相對于它在普通文檔流中的位置。
脫離文檔流后可以做什么?絕對定位的框與文檔流無關,所以它們可以覆蓋頁面上的其它元素??梢酝ㄟ^設置 z-index 屬性來控制這些框的堆放次序。
absoluted相對定位是相對于哪個盒子進行定位相對于div最近的(非static定位的)父級元素的borderbox進行定位。主要代碼如下:
文章版權歸作者所有,未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/113929.html
摘要:總結一下定位相對于誰進行定位有點復雜就是找出定位元素父元素鏈上的所有父元素,由近到遠哪個元素不是默認定位即定位的,那么就相對于它進行定位。當父元素鏈上所有父元素都是默認定位,那么定位就是相對于元素的,效果和定位差不多。 相信學過CSS的同學都曾經(jīng)對于position的各種屬性很困惑,尤其是absolute和relative定位,簡直就是傻傻分不清,筆者寫這篇文章就是希望通過代碼實驗的方...
摘要:在使用相對定位時,無論元素是否進行移動,元素依然占據(jù)原來的空間。放置絕對定位對象在可視區(qū)域之外會導致滾動條出現(xiàn)。相對定位是相對于元素在文檔流中初始位置的,而絕對定位是相對于最近的已經(jīng)定位的祖先元素。 CSS2.0 HandBook上的解釋: 設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占...
摘要:和不同,其他三個元素的位置重新排列了。只要元素會脫離文檔結構,它就會產(chǎn)生破壞性,導致父元素坍塌。的絕對定位元素的定位永遠是相對于瀏覽器邊界的,和其他元素沒有關系。 1.引言 在學習position之前,我們應該去思考一個問題:什么情況下我們需要定位?如果沒有定位將無法滿足我們怎樣的需求?我們要知道,被人類創(chuàng)造出來的每一個知識,都有它的用途,都要解決一些之前遇到的問題。 如果沒有定位,我...
摘要:當一個盒根據(jù)常規(guī)流或者浮動擺放好后,它可能會相對于該位置移動,這叫相對定位。 當一個盒根據(jù)常規(guī)流或者浮動擺放好后,它可能會相對于該位置移動,這叫相對定位。 相對定位的盒保持它在常規(guī)流中的大小,包括換行和空格都會原樣保留 relative與absolute,fixed relative與absolute的關系 在例1中,absolute元素的top/left:0的定位在瀏覽器窗口的左...
摘要:讓元素脫離文檔流有三種方法浮動絕對定位固定定位元素脫離文檔流定位的三種布局機制文檔流浮動定位。定位元素會脫離文檔流。浮動的元素是先站住自己所在文檔流的位置,然后左右浮動。 文檔流 文檔流是一種默認定位方式,在文檔流中元素框的位置由元素在html中的位置決定,文檔流中元素的position屬性為默認的static或繼承來的static并按照普通流定位。塊級元素獨占一行,自上而下排列;內(nèi)聯(lián)...
閱讀 663·2021-11-23 09:51
閱讀 3288·2021-10-11 10:58
閱讀 15450·2021-09-29 09:47
閱讀 3553·2021-09-01 11:42
閱讀 1289·2019-08-29 16:43
閱讀 1838·2019-08-29 15:37
閱讀 2102·2019-08-29 12:56
閱讀 1726·2019-08-28 18:21