HTML5 位置設置 在 HTML 5 中，我們可以使用許多不同的方式來設置元素的位置和布局。無論是在響應式設計中，還是在創建復雜的頁面布局方案中，位置設置都非常重要。本文將介紹 HTML5 中的一些主要位置設置技術。 1. 相對定位（Relative Positioning） 您可以使用相對定位來將元素相對于其正常位置移動一定的距離。相對定位不會改變 HTML 文檔的布局，只是臨時地將元素位置移動一定的距離（可以是左、右、上或下）。

p.relative {
position: relative;
left: 30px;
top: -10px;
}

在上面的示例中，p.relative 的位置將相對于其正常位置向左移動 30px，然后向上移動 10px。 2. 絕對定位（Absolute Positioning） 絕對定位是一種將元素從其正常位置移動到頁面上的指定位置的技術。絕對定位的元素的位置是相對于父元素（如果存在）或頁面的邊緣（如果不存在父元素）確定的。

div.absolute {
position: absolute;
top: 50px;
right: 0;
width: 200px;
height: 100px;
}

上面的示例將 div.absolute 定位到頁面的頂部 50px，并將其固定在頁面的右側。 3. 固定定位（Fixed Positioning） 固定定位是指將元素固定在瀏覽器窗口的指定位置，而不是相對于頁面的元素位置。固定定位的元素保持在視口中，無論用戶如何滾動頁面。

header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: #fff;
}

在上面的示例中，將 header 元素固定在頁面的頂部，這是創建類似于導航欄或頁眉的常見做法。 4. 浮動（Float） 浮動是指將元素從文檔流中移動并固定在其容器的左側或右側。當我們需要創建多列布局或圖文混排等復雜的布局時，通常會使用浮動。

img {
float: left;
margin-right: 20px;
width: 200px;
height: 150px;
}

在上面的示例中，將圖片向左浮動，并在其右側留出一個 20px 的空白區域，以便顯示其他內容。 結論 在本文中，我們介紹了 HTML5 中的一些主要位置設置技術，包括相對定位、絕對定位、固定定位和浮動。根據您的需要，您可以使用這些技術來創建各種各樣的布局和位置設置方案。