詳解css相對定位和絕對定位

Jaden 發布于2019-08-28 17:57 / 2141人閱讀

摘要：以上兩點點可以總結出，相對定位總是以父級左上角為原點進行定位的，如果父級不存在，則以瀏覽器左上角進行定位。

贊助我以寫出更好的文章，give me a cup of coffee?

2017最新最全前端面試題

案例代碼1

相對定位具有的屬性-1

1.如果設定TRBL，并且父級沒有設定position屬性，仍舊以父級的左上角為原點進行定位(和absolute不同)

點擊下方result查看demo：
http://jsfiddle.net/trigkit/e...

案例代碼2

相對定位具有的屬性-2

2. 如果設定TRBL，并且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決 定(前半段和absolute一樣)。如果父級有Padding屬性，那么就以內容區域的左上角為原點，進行定位(后半段和absolute不同)。

http://jsfiddle.net/trigkit/e...

以上兩點點可以總結出，相對定位總是以父級左上角為原點進行定位的，如果父級不存在，則以瀏覽器左上角進行定位。

相對定位的規律

1.使用相對定位的盒子，會相對于它原本的位置，通過偏移指定的距離，到達新的位置
2.使用相對定位的盒子仍在標準流中（會占據原來的位置），它對父親和兄弟盒子都沒有任何影響

絕對定位

案例代碼1

absolute具有的屬性-1

1.如果設定TRBL，并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。

http://jsfiddle.net/trigkit/e...

案例代碼2

absolute具有的屬性-2：

2.如果設定TRBL，并且父級設定position屬性(無論是absolute還是relative)，則以父級的左上角為原點進行定位，位置由TRBL決 定。即使父級有Padding屬性，對其也不起作用，說簡單點就是：它只堅持一點，就以父級左上角為原點進行定位，父級的padding對其根本沒有影 響。

點擊下方result 查看demo

http://jsfiddle.net/trigkit/e...

以上兩點可以總結出:

若想把一個定位屬性為absolute的元素定位于其父級元素內

，必須滿足兩個條件：

設定TRBL

父級設定Position屬性

絕對定位的規律

1.使用絕對定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基準進行定位。如果沒有已經定位的祖先元素，那么會以瀏覽器窗口為基準進行定位

2.絕對定位的框從標準流中脫離，這意味著他們對其后的兄弟盒子的定位沒有影響，其他的盒子好像就好像這個盒子不存在一樣

（1）所謂“已經定位”元素的含義是，position屬性被設置。

以上造成的細微偏差大家可以通過QQ截圖工具查看，到方框的應該是100像素，到瀏覽器最邊緣的應該是110像素。

GPU云服務器云服務器相對定位-絕對定位相對定位絕對定位相對定位自適應

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

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

帶你走進CSS定位詳解

摘要：相對于其最近的一個定位設置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結語結語帶你走進定位詳解，多試試，熟能生巧嘛學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關于定位屬性的具體理解和應用方案。一：定位定位屬性列表 position top...

googollee 2019-04-23 13:29 評論0 收藏0
css position: absolute、relative詳解

摘要：在使用相對定位時，無論元素是否進行移動，元素依然占據原來的空間。放置絕對定位對象在可視區域之外會導致滾動條出現。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經定位的祖先元素。 CSS2.0 HandBook上的解釋：設置此屬性值為 absolute 會將對象拖離出正常的文檔流絕對定位而不考慮它周圍內容的布局。假如其他具有不同 z-index 屬性的對象已經占...

h9911 2019-08-28 18:00 評論0 收藏0
前端技術之_CSS詳解第六天--完結

前端技術之_CSS詳解第六天--完結一、復習第五天的知識 a標簽的偽類4個：　　a:link 沒有被點擊過的鏈接　　a:visited 訪問過的鏈接　　a:hover 懸停　　a:active 按下鼠標不松手順序就是“love hate”準則。可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...

番茄西紅柿 2019-04-23 13:44 評論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...

xiguadada 2019-08-29 15:23 評論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...

alexnevsky 2019-08-02 10:26 評論0 收藏0