position:relative的意思是什么?
相對(duì)定位是CSS中的一種定位方式,它將元素相對(duì)于其正常位置進(jìn)行定位。當(dāng)為元素設(shè)置position屬性為relative時(shí),可以使用top、right、bottom和left屬性來調(diào)整元素的位置。這些屬性指定了元素相對(duì)于其原始位置的偏移量。
與絕對(duì)定位(position:absolute)和固定定位(position:fixed)不同,相對(duì)定位的元素仍然保留在文檔流中的空間,即它們?nèi)匀徽紦?jù)原始位置的空間。這意味著其他元素會(huì)圍繞相對(duì)定位的元素進(jìn)行布局,就像它仍在原始位置一樣。
相對(duì)定位的一個(gè)常見用途是創(chuàng)建元素的堆疊效果。通過調(diào)整top、right、bottom和left屬性,可以將元素相對(duì)于其原始位置進(jìn)行偏移,從而實(shí)現(xiàn)元素之間的重疊或間距調(diào)整。
例如,假設(shè)有一個(gè)段落元素,我們想要將其向下偏移10像素并向右偏移20像素。我們可以為該元素設(shè)置以下樣式:
css
p {
position: relative;
top: 10px;
right: 20px;
}
這樣,段落元素將相對(duì)于其原始位置向下移動(dòng)10像素并向右移動(dòng)20像素。其他元素將圍繞這個(gè)偏移后的位置進(jìn)行布局,就像段落元素仍在原始位置一樣。
需要注意的是,相對(duì)定位的效果是相對(duì)于元素自身的原始位置進(jìn)行計(jì)算的,而不是相對(duì)于其父元素或其他元素。因此,即使父元素的位置發(fā)生了改變,相對(duì)定位的元素仍然會(huì)相對(duì)于其原始位置進(jìn)行偏移。
總結(jié)起來,position:relative是一種CSS定位方式,它允許元素相對(duì)于其原始位置進(jìn)行偏移,而不是相對(duì)于其他元素或窗口。這種定位方式可以用于創(chuàng)建元素的堆疊效果和調(diào)整元素之間的間距。
CSS里面position:relative與position:absolute 區(qū)別
position:relative是相對(duì)定位,是相對(duì)于前面的容器定位的。這個(gè)時(shí)候不能用top left在定位。應(yīng)該用margin。比如: 當(dāng)1固定了位置。1的樣式float:left;width:100px; height:800px;2的樣式為float:left; position:relative;margin-left:20px;width:50px;2的位置在1的右邊,距離120px ...
position的值relative和absolute定位原點(diǎn)是?
relative(相對(duì)定位):定位原點(diǎn)是元素本身所在位置;absolute(絕對(duì)定位):定位原點(diǎn)是離自己這一級(jí)元素最近的一級(jí)position設(shè)置為absolute或者relative的父元素的左上角為原點(diǎn)的 absolute 生成絕對(duì)定位的元素,相對(duì)于值不為 static的第一個(gè)父元素進(jìn)行定位。fixed (老IE不支持)生成絕對(duì)定位的元素,相對(duì)于瀏覽...
width:980px;margin:0px auto; position:relative;和不加position:relati...
position:relative的作用是表示該標(biāo)簽為相對(duì)定位,其后代元素如果存在定位為absolute的元素,則會(huì)以此元素為基準(zhǔn)進(jìn)行定位(如果后代中沒有relative定位的元素時(shí),absolute才會(huì)按當(dāng)前的標(biāo)簽位置定位)。舉例說明: .relative{position:relative;}.absolute{position:absolute;top:0;left:0;...
position(五種屬性,以及每個(gè)屬性的特點(diǎn))
1. position: relative;相對(duì)定位 1> 不影響元素本身特性(無論區(qū)塊元素還是內(nèi)聯(lián)元素會(huì)保留其原本特性)2> 不會(huì)使元素脫離文檔流(元素原本位置會(huì)被保留,即改變位置也不會(huì)占用新位置)3> 沒有定位偏移量時(shí)對(duì)元素?zé)o影響(相對(duì)于自身原本位置進(jìn)行偏移)4>提升層級(jí)(用z-index樣式的值可以改變一個(gè)定位...
position:relative;相對(duì)定位是否以上一對(duì)象的所留空間作為下一對(duì)象的...
你的問題描述的有些不明白,上一對(duì)象的所留空間作為下一對(duì)象的原點(diǎn)定位,那么你的意思是用了position:relative;的層是第二層,第一層的所留空間作為第三層的原點(diǎn)定位?涉及父子子三層div嗎? position:relative;是相對(duì)其自身原有位置的定位,比如該div就在左上角,position:relative;就是相對(duì)左上角那個(gè)...
Dreamweaver 里position: relative;問題
給定位的東西找個(gè)爸爸 position: relative;相對(duì)定位 --- 相對(duì)定位占據(jù)文檔流,就是說定位的東西位移了,在它本該出現(xiàn)的位置瀏覽器還是會(huì)渲染出一個(gè)占位的框框!position:absolute;絕對(duì)定位 --- 據(jù)對(duì)定位是將元素從原來的位置拖出來,不占據(jù)文檔流,在原來位置不會(huì)留下占位框。但是絕對(duì)定位在窗口大小不...
Position屬性四個(gè)值:static、fixed、absolute和relative的區(qū)別和...
Fixed(固定定位):元素相對(duì)于瀏覽器窗口定位,位置由left、top、right、bottom決定,層級(jí)可通過z-index調(diào)整。Relative定位的元素類似于普通div,可以使用TRBL進(jìn)行布局,但absolute用于定位元素在另一個(gè)絕對(duì)定位元素內(nèi)部,而非整個(gè)頁面布局。理解position屬性時(shí),關(guān)鍵在于理解元素與文檔流的關(guān)系,以及父元素...
父容器加上:position:relative;子容器加上:position:absolute;bottom:0...
position:absolute;這個(gè)顧名思義是絕對(duì)布局,在元素中設(shè)置之后,該元素會(huì)脫離文檔流,它并不是像樓下說的相對(duì)于瀏覽器進(jìn)行定位,而是一層一層向上尋找父元素,直到尋找到第一個(gè)position不為static的祖先元素,它相對(duì)于這個(gè)祖先元素進(jìn)行定位。所以當(dāng)你的父元素position:relative時(shí),該子元素是相對(duì)于你的父...
position中absolute和relative的區(qū)別
absolute指絕對(duì)位置,就是說設(shè)定后該控件是固定在頁面的某處,不會(huì)因其他控件的大小變化而影響到其分布位置的改變。position指一般位置,就是說設(shè)定后該控件在無其他控件的影響下,其位置位于你設(shè)定的地方。如果其他控件的大小占用了你設(shè)定的位置,那么原先就會(huì)讓出位置啦。relative指相對(duì)位置,就是相對(duì)來說...
網(wǎng)頁布局中position定位講解
工具\(yùn)/材料 Adobe Dreamweaver CS5 1、相對(duì)定位(relative)是非常容易掌握的概念,通俗一點(diǎn)就是正常的塊級(jí)定位,只不過塊級(jí)的位置是通過top、left、right、bottom屬性來進(jìn)行規(guī)定。不過,原來所占用的空間并沒有消失。首先先來正常的定位,如下圖。2、然后在正常定位的里面,利用position:relative來相對(duì)定位,...
相關(guān)評(píng)說:
南部縣細(xì)牙: ______ 因?yàn)槟阋欢ㄒ猵osition: relative的緣故,在用一層DIV包裹在這層新的DIV上用position:fixed;或者用position: absolute;在你resize的時(shí)候用JS改變 定位的值.
南部縣細(xì)牙: ______ <p>默認(rèn)值是static. </p> <p>--------------------------------------------------------------------------------------------------------------------- </p> <p>通過使用 position 屬性,我們可以選擇 4 種不同類型的定位,這會(huì)影響元素框生成的方式.</p> <p> </p> <p>position 屬性...
南部縣細(xì)牙: ______ position:absolute 絕對(duì)定位,根據(jù)上層相對(duì)定位來絕對(duì)定位,也可按窗口左上標(biāo)來絕對(duì)定位. position:relative 相對(duì)定位
南部縣細(xì)牙: ______ position:absolute這個(gè)是絕對(duì)定位; 是相對(duì)于瀏覽器的定位. 比如:position:absolute;left:20px;top:80px; 這個(gè)容器始終位于距離瀏覽器左20px,距離瀏覽器上80px的這個(gè)位置. position:relative是相對(duì)定位,是相對(duì)于前面的容器定位的.這個(gè)時(shí)...
南部縣細(xì)牙: ______ position=relative 就是說聲明一個(gè)固定的位,并不是說相對(duì)于上一個(gè)div的左上角還是左下角,想要相對(duì)于上一個(gè)div的左上角還是左下角,就得這樣寫<div position=relative left=200 top=200>
南部縣細(xì)牙: ______ 既然是 b元素 相對(duì)于 a元素 來定位 如果你不給 a元素 加上 position: relative; 的話,則 b元素相對(duì)的不是 a,而是相對(duì)整個(gè)頁面在定位.你講的其實(shí)是:相對(duì)定位嵌套絕對(duì)定位,條件是元素有嵌套父子關(guān)系:1. a元素為父元素,b元素為子元素2. ...
南部縣細(xì)牙: ______ 給當(dāng)前的元素定位用的,對(duì)于前面的容器定位的
南部縣細(xì)牙: ______ 在父標(biāo)簽先設(shè)置position:absolute需要位移再用position:relative用Hank進(jìn)行調(diào)整,一般只調(diào)IE6和firefox,別的看需求_top:10px; IE6識(shí)別
南部縣細(xì)牙: ______ 對(duì)body內(nèi)的東西基本上沒什么影響,body不會(huì)被重疊(其它層或內(nèi)容擋住),如果body加上了left,right,top,bottom 則可以改變body容器位置,實(shí)現(xiàn)控制頁面顯示位置
南部縣細(xì)牙: ______ 該DIV相對(duì)于上面那個(gè)DIV aaaaaa位置 body td都同理.