摘要:定位分為種方式靜態(tài)定位,相對(duì)定位,絕對(duì)定位,固定定位靜態(tài)定位相對(duì)定位根據(jù)自身原來的位置定位,沒有脫離標(biāo)準(zhǔn)流絕對(duì)定位定位的元素沒有父元素的情況下,根據(jù)瀏覽器的可視區(qū)域定位定位的元素有父元素,父元素?zé)o定位或父元素有靜態(tài)定位,根據(jù)瀏覽器可
定位分為4種方式:靜態(tài)定位,相對(duì)定位,絕對(duì)定位,固定定位
靜態(tài)定位:position:static
相對(duì)定位:position:relative
根據(jù)自身原來的位置定位,沒有脫離標(biāo)準(zhǔn)流
絕對(duì)定位:position:absolute
1.定位的元素沒有父元素的情況下,根據(jù)瀏覽器的可視區(qū)域定位;
2.定位的元素有父元素,父元素?zé)o定位(或父元素有靜態(tài)定位),根據(jù)瀏覽器可視區(qū)域定位;
3.定位的元素有父元素,父元素有定位(非靜態(tài)),根據(jù)父元素定位;
固定定位:position:fixed
根據(jù)瀏覽器可視區(qū)域定位,與父元素?zé)o關(guān)
定位的元素如果要在父元素中垂直水平居中:
top:50%? ? ?margin-top: -(定位元素高度的一半);
left:50%? ? ?margin-left: -(定位元素寬度的一半);
層級(jí):z-index? 只能給定位的元素添加? 默認(rèn)值:auto
數(shù)值越大,層級(jí)越高,盒子越靠上
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://www.ezyhdfw.cn/yun/1205.html
摘要:下文稱位置屬性即為。注意,不會(huì)脫離文檔流,具體見下面的圖示。直譯為修正,簡(jiǎn)單粗暴,直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute,當(dāng)年可是被虐的不輕。當(dāng)然了,現(xiàn)在愛上了這個(gè)屬性,誰用誰知道。 position屬性 position是CSS的一個(gè)屬性,地位較高,也是我們重點(diǎn)要說的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要:下文稱位置屬性即為。注意,不會(huì)脫離文檔流,具體見下面的圖示。直譯為修正,簡(jiǎn)單粗暴,直接相對(duì)瀏覽器窗口顯示區(qū)域定位。 Position定位 個(gè)人覺得position這個(gè)屬性真的算是CSS的見面殺了。尤其是absolute,當(dāng)年可是被虐的不輕。當(dāng)然了,現(xiàn)在愛上了這個(gè)屬性,誰用誰知道。 position屬性 position是CSS的一個(gè)屬性,地位較高,也是我們重點(diǎn)要說的一個(gè)屬性。 對(duì)應(yīng)了四...
摘要:最近在慕課網(wǎng)學(xué)習(xí)了網(wǎng)頁布局基礎(chǔ)和固定層效果,都是由聲音甜美的婧享人生老師所錄制,視頻詳細(xì)講解了中的用法,在此把學(xué)習(xí)筆記分享給大家。 最近在慕課網(wǎng)學(xué)習(xí)了 網(wǎng)頁布局基礎(chǔ) 和 固定層效果 ,都是由聲音甜美的 婧享人生 老師所錄制,視頻詳細(xì)講解了CSS中position的用法,在此把學(xué)習(xí)筆記分享給大家。 CSS定位機(jī)制 標(biāo)準(zhǔn)文檔流(Normal flow) 浮動(dòng)定位(Floats) 絕對(duì)定位...
摘要:張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似,都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性,使用動(dòng)畫可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng),可應(yīng)用于大范圍的布局。 《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記 絕對(duì)定位的特性 絕對(duì)定位與浮動(dòng)相似,都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代 絕對(duì)定位的行為表現(xiàn) 無依賴絕對(duì)...
摘要:重點(diǎn)介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準(zhǔn)備前端方面的面試,所以對(duì)自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上),有許多地方敘述的并不是十分詳細(xì),只是大致的描述一下,給自己提供一個(gè)知識(shí)輪廓。本篇中主要描述...
閱讀 2240·2021-09-22 15:54
閱讀 1961·2021-09-04 16:40
閱讀 1003·2019-08-30 15:56
閱讀 2745·2019-08-30 15:44
閱讀 2270·2019-08-30 13:52
閱讀 1243·2019-08-29 16:35
閱讀 3463·2019-08-29 16:31
閱讀 2683·2019-08-29 13:48