CSS元素定位是網頁設計中非常重要的一部分，它能讓我們更方便的布局和定位元素。在日常的開發中，我們可能需要經常使用到一些常量，這時候使用變量來定義常量會更加靈活方便。

/* 定義變量 */
:root {
--header-height: 80px;
}
/* 使用變量 */
header {
height: var(--header-height);
}

在上面的代碼中，我們使用了:root偽類定義了一個名為header-height的變量，它的值為80px。接著我們在header選擇器的height屬性中使用了該變量，這樣我們在后續修改header的高度時，只需要修改一處，所有使用該變量的地方都會隨之改變。

/* 定義多個變量 */
:root {
--header-height: 80px;
--main-height: calc(100vh - var(--header-height));
}
header {
height: var(--header-height);
}
main {
height: var(--main-height);
}

上面的代碼中，我們使用calc()函數和var()函數相結合，定義了一個名為main-height的變量，它的值為視口高度減去header高度。接著我們在main選擇器的height屬性中使用了該變量，這樣我們就可以實現main元素占據剩余視口高度的效果。

通過使用變量定義常量，我們能夠讓CSS布局更加靈活方便，減少重復的代碼，提高代碼的可維護性和可讀性。