CSS中的定位是非常有用的,可以讓我們更加精確地控制網頁上的元素。而利用定位來做偏移也是一個常用的技巧。比如,我們可以使用position和top、left、right、bottom來控制一個元素的位置。
.box { position: relative; /*相對定位*/ top: 20px; /*上偏移20像素*/ left: 50px; /*左偏移50像素*/ }
相對定位是基于元素原本的位置進行定位的,而不是基于文檔流的位置。當我們使用top、left、right、bottom屬性時,就相當于在元素原本的位置上做了一定的偏移。
絕對定位也是常用的定位方式之一,它可以讓我們的元素脫離文檔流,不受其他元素的影響,完全自由地擺放。我們可以使用position和top、left、right、bottom來控制一個元素的位置。
.box { position: absolute; /*絕對定位*/ top: 20px; /*上偏移20像素*/ left: 50px; /*左偏移50像素*/ }
絕對定位是相對于最近的已定位的祖先元素進行定位的。如果沒有已定位的祖先元素,那么它會相對于文檔的左上角進行定位。
需要注意的是,使用定位做偏移可能會對網頁布局產生一定的影響,因此我們應該掌握好使用定位的時機和方法,做出優美的網頁布局。
上一篇css+元素+部分透明度
下一篇css+價格刪除