相對定位和絕對定位

2021-08-10 15:49:59 字數 413 閱讀 5295

作為乙個小白菜,真的不知道什麼是相對定位,什麼是絕對定位。然後自己就寫了乙個簡易的html來玩弄了一下。

應用position定位的原因:是為了用top,left,right,bottom等定位屬性,沒有用position定位的話,top等屬性將無效。

相對定位:position:relative,相對定位的元素是擁有空間佔位的。在top、left等定位屬性定位時,向下或向左移動是相對於元素的當前位置。而且在移動之後,元素之前所在的位置會保留空間佔位。

絕對定位:position:absolute,絕對定位的元素是沒有空間佔位的。所以在top、left等定位屬性定位時,向下或向左移動時參照的是瀏覽器的上邊框、左邊框。因為本身沒有空間佔位,所以移動後也不會保留空間佔位。

很多東西並不是你想象的那樣,需要多動手。鄧爺爺說過,實踐是檢驗真理的唯一標準。

絕對定位和相對定位

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

相對定位和絕對定位

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

絕對定位和相對定位

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