對于網頁設計和布局，CSS 相對定位（relative positioning）和浮動（float）是兩個重要的概念。下面分別對它們進行詳細介紹。

相對定位是指將一個 HTML 元素相對于它的原始位置進行微調。在 CSS 中，可以使用position: relative;來設置一個元素相對定位。例如，下面的代碼可以將一個div元素向右移動 20 像素：

div {
position: relative;
left: 20px;
}

相對定位不會影響其他元素的位置，所以它通常被用來微調單個元素的位置或調整一個元素的疊放順序。在實際的網頁設計中，相對定位經常和絕對定位（absolute positioning）一起使用，來創建復雜的布局效果。

浮動是指將一個元素從其正常位置“浮動”到容器的左邊或右邊。在 CSS 中，可以使用float: left;或float: right;來設置一個元素浮動。例如，下面的代碼可以將一個img元素向左浮動：

img {
float: left;
}

浮動的常見用途包括：創建多列布局、實現文字環繞、制作導航欄等。但是，浮動元素也可能會帶來一些問題，例如：如果容器高度不夠，浮動元素可能會溢出到容器外部；如果浮動元素高度不同，可能會導致容器高度不正確。因此，在使用浮動時要注意一些細節，例如清理浮動（clearing floats）以解決高度問題。