CSS中有很多定位方式,其中相對定位是一種常見的方式。相對定位可以讓元素相對于它原先的位置移動,但是有時候我們會發現,相對定位不起作用,這是為什么呢?下面就來分析一下。
首先需要知道,相對定位是相對于元素自身的原始位置進行移動的。如果元素的原始位置不確定或者已經被其他定位方式改變了,那么相對定位也就失去了作用。在這種情況下,相對定位不會引起任何視覺上的變化,元素仍然會呈現在其原本的位置。
為了說明這個問題,可以看以下代碼:
相對定位測試
在這段代碼中,外層的div采用了絕對定位,內層的div采用了相對定位,并設置了left和top屬性。但是,如果外層div的定位方式改為相對定位:
相對定位測試
那么內層div的位置就不會發生變化,因為它相對于外層div的位置已經發生了改變,原始的位置已經不再是它所在的位置了。
總的來說,如果元素的位置已經被其他方式改變了,相對定位就失去了作用。要想解決這個問題,有兩種方式。第一種是更改元素的定位方式,使其回到原來的位置。第二種是使用絕對定位來代替相對定位,因為絕對定位是相對于其父級元素來定位的,不會受到自身位置的限制。