css之定位

zhangwang 發(fā)布于2019-04-23 11:49 / 3395人閱讀

摘要：定位分為種方式靜態(tài)定位，相對定位，絕對定位，固定定位靜態(tài)定位相對定位根據(jù)自身原來的位置定位，沒有脫離標準流絕對定位定位的元素沒有父元素的情況下，根據(jù)瀏覽器的可視區(qū)域定位定位的元素有父元素，父元素無定位或父元素有靜態(tài)定位，根據(jù)瀏覽器可

定位分為4種方式：靜態(tài)定位，相對定位，絕對定位，固定定位

靜態(tài)定位：position:static

相對定位：position:relative

　　根據(jù)自身原來的位置定位，沒有脫離標準流

絕對定位：position:absolute

　　1.定位的元素沒有父元素的情況下，根據(jù)瀏覽器的可視區(qū)域定位；

　　2.定位的元素有父元素，父元素無定位(或父元素有靜態(tài)定位)，根據(jù)瀏覽器可視區(qū)域定位；

　　3.定位的元素有父元素，父元素有定位（非靜態(tài)），根據(jù)父元素定位；

固定定位：position:fixed

　　根據(jù)瀏覽器可視區(qū)域定位，與父元素無關(guān)

定位的元素如果要在父元素中垂直水平居中：

　　top:50%? ? ?margin-top: -(定位元素高度的一半)；

　　left:50%? ? ?margin-left: -(定位元素寬度的一半)；

層級：z-index? 只能給定位的元素添加? 默認值：auto

　　數(shù)值越大，層級越高，盒子越靠上

GPU云服務器云服務器相對定位-絕對定位之字形系列之香江之無限

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1205.html

相關(guān)文章

天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現(xiàn)在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

anRui 2019-08-02 10:56 評論0 收藏0
天坑，CSS之定位Position（六分之五）

摘要：下文稱位置屬性即為。注意，不會脫離文檔流，具體見下面的圖示。直譯為修正，簡單粗暴，直接相對瀏覽器窗口顯示區(qū)域定位。 Position定位個人覺得position這個屬性真的算是CSS的見面殺了。尤其是absolute，當年可是被虐的不輕。當然了，現(xiàn)在愛上了這個屬性，誰用誰知道。 position屬性 position是CSS的一個屬性，地位較高，也是我們重點要說的一個屬性。對應了四...

xuweijian 2019-08-30 15:54 評論0 收藏0
CSS基礎(chǔ)知識之position

摘要：最近在慕課網(wǎng)學習了網(wǎng)頁布局基礎(chǔ)和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了中的用法，在此把學習筆記分享給大家。最近在慕課網(wǎng)學習了網(wǎng)頁布局基礎(chǔ) 和固定層效果，都是由聲音甜美的婧享人生老師所錄制，視頻詳細講解了CSS中position的用法，在此把學習筆記分享給大家。 CSS定位機制標準文檔流（Normal flow）浮動定位（Floats）絕對定位...

xiaowugui666 2019-08-30 12:56 評論0 收藏0
【學習筆記】CSS深入理解之absolute

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現(xiàn)寬高自適應，可應用于大范圍的布局。《張鑫旭的CSS深入理解之a(chǎn)bsolute》學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代絕對定位的行為表現(xiàn) 無依賴絕對...

Anleb 2019-08-30 15:54 評論0 收藏0
前端面試之CSS總結(jié)(上)

摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內(nèi)邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結(jié) 由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結(jié)。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

?。琛?/span> 2019-08-29 11:18 評論0 收藏0