相對定位,絕對定位和固定定位

2022-09-07 04:00:11 字數 1475 閱讀 9140

1.脫標,但是保留原來位置(下面的盒子上不來,也可以說是半脫標)

2.偏移從以自己標準流中的位置為原點

1.完全脫標,不保留原來位置

2.父元素沒有定位的情況,子盒子以當前螢幕為基準點進行移動

3.父元素有定位(相對,固定,絕對)的情況,子盒子以父元素(有定位的最近祖元素)為基準點進行移動

<

body

>

<

div

class

="top"

>絕對定位的盒子

div>

<

div

class

="bottom"

>下面的盒子

1.盒子完全脫標,不佔位置,

2.父盒子不管有無定位,都是以瀏覽器為基準點進行移動

相對定位,絕對定位和固定定位

相對定位 relative 是相對於自己原本的位置進行偏移,但他仍在標準文件流中,且偏移前的位置會被保留 html lang en id father id first 第乙個盒子 id second 第二個盒子 第三個盒子 效果如下 向右偏移 left 20 px 向上偏移 top 20px 效果...

相對定位 絕對定位 固定定位

設定position屬性值為static的元素是乙個靜態定位元素,此值為預設值,即此元素在正常文件流中。設定position屬性為relative的元素是乙個相對定位元素,其定位的參照物為元素本身 即元素原本的位置進行定位 例項 parent child style class parent cla...

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...