相對定位和絕對定位

2022-09-04 07:12:08 字數 1364 閱讀 1838

position:absolute(絕對定位),它將元素從文件流中拖出來,然後使用left、right、top、bottom屬性相對於其最接近的乙個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊,則相對於body元素,即相對於瀏覽器視窗

position:relative(相對定位),它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留不動

什麼叫做「偏移前的位置保留不動」呢?

偏移前的位置還保留不動,覆蓋不了前面的div沒有偏移前的位置

效果圖:

position:fixed(固定定位),與absolute定位型別類似,但它的相對移動的座標是檢視(螢幕內的網頁視窗)本身。由於檢視本身是固定的,它不會隨瀏覽器視窗的滾動條滾動而變化,除非你在螢幕中移動瀏覽器視窗的螢幕位置,或改變瀏覽器視窗的顯示大小,因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置,不會受文件流動影響,這與background-attachment:fixed;屬性功能相同。以下**可以實現相對於瀏覽器檢視向右移動100px,向下移動50px。並且拖動滾動條時位置固定不變。

使用position:absolute可以實現被設定元素相對於瀏覽器(body)設定定位以後,大家有沒有想過可不可以相對於其它元素進行定位呢?答案是肯定的,當然可以。使用position:relative來幫忙,但是必須遵守下面規範:

1、參照定位的元素必須是相對定位元素的前輩元素:

相對參照元素進行定位

從上面**可以看出box1是box2的父元素(父元素當然也是前輩元素了)。

2、參照定位的元素必須加入position:relative;

#box1
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

#box2
這樣box2就可以相對于父元素box1定位了(這裡注意參照物就可以不是瀏覽器了,而可以自由設定了)。

絕對定位和相對定位

換了乙個新工作,一上來就是改前台web頁面之類的東西,工作這麼久以來web css之類的只是皮毛級應用,知之勝少,搞乙個css定位之類的東西還讓我費了好大一番勁,丟人啊。研究了以下,稍微總結一下吧。絕對定位和相對定位 這裡以div容器為例 1 相對定位 元素框偏移某個距離。元素仍保持其未定位前的形狀...

相對定位和絕對定位

相對定位和絕對定位 定位標籤 position 包含屬性 relative 相對 absolute 絕對 1.position relative 如果對乙個元素進行相對定位,首先它將出現在它所在的位置上。然後通過設定垂直或水平位置,讓這個元素 相對於 它的原始起點進行移動。再一點,相對定位時,無論是...

絕對定位和相對定位

css的相對定位和絕對定位 通常情況下,我們元素的position屬性的值預設為static 就是沒有定位,元素出現在正常的文件流中,這個時候你給這個元素設定的left,right,bottom,top這些偏移屬性都是沒有效果的,不會生效,比如你設定乙個距離左邊距偏移100px的宣告 left 10...