資訊專欄INFORMATION COLUMN
摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。
一. CSS position 屬性介紹
CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed四種取值，默認是static。
二. position: staticstatic：沒有定位，元素出現在正常的文檔流中，忽略left，right，top，bottom和z-index。
所以對元素position屬性設定static時，left屬性不起作用，但是元素出現在正常的流中。
三. position: fixedfixed：生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。
窗口滾動不會影響content元素位置，content元素一直在contaniner元素的右下角。
四. position: relativereletive：元素相對其自己正常位置定位，元素在正常的文檔流中。
沒有設置left和top時的正常位置。
設置了left和top屬性，元素位置移動，向右移動50px，向下移動20px。但是元素預留的空間保持正常流動，也就是不會對其他元素產生影響。
五. position: absoluteabsolute：元素絕對定位，相對于static定位以外的第一個父元素，元素脫離文檔流。
所以會找到static定位以外的第一個父元素，因為span的父元素content和container都沒有設置position屬性，默認為static，找到的第一個父元素就為html
，相對于向左移動100px。如果對content或container設置position屬性為relative，absolute或fixed，span會相對于content或container來定位。
以下是三個例子，
span元素的第一個position屬性不為static的父元素是content，所以相對于content向左移動10px。
當content屬性設置為fixed時，span元素相對于content向左移動10px。
span元素第一個position屬性不為static的父元素是container，所以相對于container向左移動10px。
六. 總結position: static，元素出現在正常的流中，無法通過left，right，top和bottom設置元素定位。
position: fixed，元素脫離文檔流，相對于瀏覽器窗口定位不變。
position: relative，元素出現在正常的流中，相對于其正常位置定位。
position: absolute，元素脫離文檔流，相對于static以外的第一個父元素定位。
理解了position的屬性，可以更好的設計頁面和實現頁面。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/52349.html
摘要：三生成固定定位的元素，相對于瀏覽器窗口定位，即瀏覽器窗口滾動也不會影響元素位置，元素的位置與文檔流無關，因此不占據空間，可能會和其他元素發生重疊。，元素脫離文檔流，相對于以外的第一個父元素定位。 一. CSS position 屬性介紹 CSS中position屬性指定一個元素（靜態的，相對的，絕對或固定）的定位方法的類型。有static，relative，absolute和fixed...
摘要：相對于其最近的一個定位設置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結語結語帶你走進定位詳解，多試試，熟能生巧嘛 學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關于定位屬性的具體理解和應用方案。 一：定位 定位屬性列表 position top...
簡述 定位問題一直是新手學習css的一個難點，現在我將他們總結出來，希望對大家有幫助 position詳解 在css中，通過position屬性，配合top,right,left,buttom對元素進行定位position屬性有：static，relative，absolute，fixed四種，下面分別探討 默認定位static Document ...
摘要：，這一句是刪除的縮進，這樣做可以使所有的列表內容都不縮進。中的與樣式詳解和列表是使用布局頁面時常用的元素。這里是列表內容這里是列表內容四屬性屬性是綜合設置樣式的屬性，也是一個可以繼承的屬性，語法結構如下各個值的位置可以交換。代碼如下: ??首頁??博客??設計??相冊??論壇??關于??? CSS:? 復制代碼 代碼如下: #menu ul {list-style:none;margi...
摘要：屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。元素將會脫離正常的文檔流，所以其周圍的元素將會忽略它的存在。此時，我們可以使用等屬性對元素進行絕對定位。一般情況下定義兩個屬性，或或。 postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值： position: absolute position: relative position...
閱讀 632·2021-11-22 15:32
閱讀 2720·2021-11-19 09:40
閱讀 2313·2021-11-17 09:33
閱讀 1263·2021-11-15 11:36
閱讀 1864·2021-10-11 10:59
閱讀 1475·2019-08-29 16:41
閱讀 1780·2019-08-29 13:45
閱讀 2150·2019-08-26 13:36
