在進行CSS樣式調整時，經常需要找到某個元素在頁面中的位置。下面介紹幾種查找位置的方法。

// 示例代碼
.header {
position: fixed;
top: 0;
left: 0;
}

1. 使用Chrome開發者工具

Chrome瀏覽器的開發者工具提供了非常方便的元素定位功能。

按下F12打開開發者工具，然后在Elements面板中選擇要查找的元素。

在Styles面板中可以看到該元素的所有樣式，其中包括position、top和left等位置屬性。

// 使用Chrome開發者工具查找位置

2. 使用JavaScript

在頁面中添加以下JavaScript代碼：

// 查找元素
const element = document.querySelector('.header');
// 獲取位置
const { top, left } = element.getBoundingClientRect();
console.log(`top: ${top}, left: ${left}`);

運行代碼后，控制臺會輸出該元素的位置。

3. 使用CSS樣式

在CSS樣式中可以使用outline屬性顯示元素在頁面中的位置。

將以下代碼添加到CSS樣式中：

// 顯示元素位置
.header {
outline: 1px solid red;
}

該元素周圍會出現一個紅色邊框，方便查看其位置。