【學習筆記】CSS深入理解之absolute

Anleb 發布于2019-08-30 15:54 / 3348人閱讀

摘要：張鑫旭的深入理解之學習筆記絕對定位的特性絕對定位與浮動相似，都有破壞性和包裹性。利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。

《張鑫旭的CSS深入理解之absolute》學習筆記

絕對定位的特性

絕對定位與浮動相似，都有破壞性和包裹性。浮動的一些應用場景中也可用絕對定位替代

絕對定位的行為表現 無依賴絕對定位元素

在未手動定位的情況下，絕對定位元素有以下特性

去float化 - float屬性將會失效

跟隨性 - 根據原有位置脫離文檔流放置

無依賴絕對定位元素 —— 即未手動定位的絕對定位元素

無依賴絕對定位元素的使用

無依賴絕對定位元素可以使用margin值進行定位，實現脫離文檔流的相對定位效果，脫離文檔流可以解決溢出限制的問題

應用實例：

圖標定位：角標之類的可以使用DOM位置結合絕對定位margin偏移實現定位，不一定要使父容器成為包含塊

下拉框定位：下拉框和輸入框之間的聯系可以使用絕對定位margin偏移實現

邊緣定位：利用跟隨性，使元素跟隨空白字符放置

圖標對齊和文本溢出處理

絕對定位脫離文檔流

絕對定位+動畫，避免回流和重繪

覆蓋層級，z-index + 絕對定位 > 后置絕對定位元素 > 前置絕對定位元素 > z-index > 普通元素
https://codepen.io/curlywater...

絕對定位和width/height

無固定width/height，絕對定位方向是對立的（如left vs right, top vs bottom）的時候，絕對定位元素拉伸。可應用于寬高自適應

有固定width/height，絕對定位拉伸失效

固定width + left + right，相當于元素有了一個固定寬度，這時使用margin: auto可達到居中效果

總結

絕對定位相對于包含塊定位；
在日常使用種，一般會習慣性對父容器使用relative，使用top/bottom/left/right來脫離文檔流的絕對定位；
但無依賴絕對定位元素結合margin偏移使用也可以實現一些實用的效果。

利用絕對定位元素脫離文檔流的特性，使用動畫可以避免大范圍的回流和重繪。

絕對定位元素拉伸實現寬高自適應，可應用于大范圍的布局。

云服務器 GPU云服務器深入理解webrtc之aec 如何深入理解深度學習深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/117048.html

【學習筆記】CSS深入理解之margin

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸可視尺寸對于沒有設定的塊元素，可改變元素水平方向的可視尺寸占據尺寸對于元素，可改變元素水平垂直方向的占據尺寸與百分比單位普通元素的百分比都是相對于容器的寬度計算的絕對定位元素的百分比是相對于包含塊的寬張鑫旭的CSS深入理解之margin學習筆記 margin與容器的尺寸可視尺寸：對于沒有設定width的塊元素，margin可改變元素水平方向...

stefan 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之overflow

摘要：張鑫旭的深入理解之學習筆記基本屬性屬性介紹默認當與值相同時，等同于當與值不相同時，其中一個值被賦予時，若另一個值為，那這個會被重置為作用前提元素非對應方位的尺寸限制拉伸對于單元格等需要為狀態才可以與滾動條頁面默認滾動條來自與無《張鑫旭的CSS深入理解之overflow》學習筆記 overflow基本屬性 overflow屬性介紹 overflow: visible(默認)|hidd...

Ali_ 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之vertical-align

摘要：上例中，左邊盒子的基線為其底邊緣，右邊盒子的基線為的基線將右邊盒子的行高設置為，即這個的高度為，位置處于中間。 vertical-align的值線類：baseline（默認）, top, bottom, middle 文字類：text-top, text-bottom 上標下標類：sub, super 數值：1px, 1em - 在baseline對齊的基礎上上下偏移一定數值百分...

ermaoL 2019-08-30 15:54 評論0 收藏0
【學習筆記】CSS深入理解之float

摘要：為了實現文字環繞效果，規范規定的措施是使父容器塌陷，元素脫離文檔流浮動，元素周圍的內容轉換為圍繞元素排列。從浮動的起因和浮動的實現后果來看，浮動不適合用于大范圍的布局，更適合利用其特性實現一些小范圍的流體布局效果。張鑫旭的CSS深入理解之float浮動學習筆記 float的歷史 float為產生文字環繞效果而生 float的特性 — 包裹和破壞包裹：即產生一個BFC破壞：使父容器...

denson 2019-08-29 17:31 評論0 收藏0
【學習筆記】CSS深入理解之padding

摘要：張鑫旭的深入理解之學習筆記與容器的尺寸元素值過大，一定影響元素尺寸為定值，會影響元素尺寸為或者為，同時值沒有暴走，不影響元素尺寸元素水平影響尺寸，垂直不影響尺寸，但是會影響占據空間會顯示背景色負值與百分比單位不支持負值百分比相對于自身寬張鑫旭的CSS深入理解之padding學習筆記 padding與容器的尺寸 block元素 padding值過大，一定影響元素尺寸 width為定...

learn_shifeng 2019-08-30 15:54 評論0 收藏0