在CSS中,我們可以使用相對定位屬性來控制圖片在頁面中的顯示位置。相對定位是一種相對于元素原本位置的定位方式,其定位不影響其他元素在頁面中的位置。
img { position: relative; left: 50%; top: 50%; }
上述代碼中,我們給圖片元素設置了相對定位,并且將其左邊緣向頁面中心移動了50%,同時將其上邊緣也向中心移動了50%。這樣,圖片就顯示在了頁面的正中心。
除了使用left和top屬性來控制位置外,我們還可以使用right和bottom屬性。值得注意的是,這些屬性都是基于元素原有位置計算的,所以相對定位的元素仍然占據原有空間,不會影響其他元素的位置。
img { position: relative; right: 20px; bottom: 30px; }
上述代碼中,我們將圖片元素向右移動了20個像素,向下移動了30個像素,這樣就實現了自定義的相對定位效果。