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