IFE-Task-03:三欄式布局_html/css

來源：懂視網責編：小采時間：2020-11-27 16:29:26

IFE-Task-03:三欄式布局_html/css

IFE-Task-03:三欄式布局_html/css_WEB-ITnose:position屬性 CSS的 position 屬性設置元素的定位方式，為將要定位的元素定義定位規(guī)則。(摘自 MDN) 其默認值為static，當元素的position屬性不為static就被稱之為定位元素。其包括相對定位元素、絕對定位元素、粘性定位元素三種類型。最后的粘性屬性st

推薦度：

點擊下載本文 文檔為doc格式

導讀IFE-Task-03:三欄式布局_html/css_WEB-ITnose:position屬性 CSS的 position 屬性設置元素的定位方式，為將要定位的元素定義定位規(guī)則。(摘自 MDN) 其默認值為static，當元素的position屬性不為static就被稱之為定位元素。其包括相對定位元素、絕對定位元素、粘性定位元素三種類型。最后的粘性屬性st

position屬性

CSS的 position 屬性設置元素的定位方式，為將要定位的元素定義定位規(guī)則。(摘自 MDN)

其默認值為static，當元素的position屬性不為static就被稱之為定位元素。其包括相對定位元素、絕對定位元素、粘性定位元素三種類型。最后的粘性屬性sticky還處在實驗狀態(tài)中。其余3種屬性值如下：

relative 為相對定位。relative元素依據自身的原始位置進行相對變化，其原始位置保留不會改變布局。和static一樣不會脫離文檔普通流（normal-flow）。什么是文檔普通流

absolute 為絕對定位。absolute元素會遞歸查找該元素的祖先元素，如果最近的祖先元素position設置為relavite/absolute/fixed，則依據該祖先元素進行偏移。如果不存在包含上述屬性的祖先元素，該元素的位置則由初始包含塊（initial containing block）定位。absolute的元素會脫離普通流。

fixed 為固定定位。fixed元素通過相對于屏幕視窗的位置來指定元素空間。fixed元素依然會脫離普通流。

說完理論，我們思考barelyfitz上的案例。我們知道absolute會脫離普通流，那在使用中出現案例第五步中的遮蓋問題。兩個absolute定位的元素#div-1a、#div-1b將普通流中的#div-1c遮蓋掉。作者使用float屬性來解決這個問題。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com