css3定位網頁元素筆記

CSS3定位網頁元素筆記

CSS3擁有多種定位網頁元素的方法，可以讓網頁達到更加多彩、生動的效果。本篇筆記將介紹三種常用的定位方法。

相對定位指的是相對于元素原來的位置進行調整，可以使用left、right、top、bottom屬性進行定位調整。

div {
position: relative;
left: 50px;
top: 30px;
}

上述代碼將

元素向右移動50像素，向下移動30像素。

絕對定位指元素相對于父元素進行定位。需要先對父元素進行相對定位，然后才能對子元素進行絕對定位。可以使用left、right、top、bottom屬性進行調整

.father {
position: relative;
}
.son {
position: absolute;
left: 50px;
top: 30px;
}

上述代碼將子元素

向右移動50像素，向下移動30像素。

固定定位指元素相對于視口進行定位，通常使用在頁面的導航欄或者廣告懸浮窗等元素上。可以使用left、right、top、bottom屬性進行調整

div {
position: fixed;
right: 0;
top: 0;
}

上述代碼將

元素固定在瀏覽器窗口的右上角。

CSS3定位網頁元素是實現頁面美化和功能增加的必備手段，需要熟練掌握。