CSS定位是網頁布局的重要組成部分，通過CSS定位效果可以讓網頁更具有視覺效果。本文就來介紹一些CSS定位拓展效果。

首先，我們來看一下CSS定位的基礎知識。

position: static | relative | absolute | fixed | sticky;

其中，static是默認值，元素按照文檔流排列；relative則是相對定位，元素會相對于自身的位置調整；absolute是絕對定位，元素的位置相對于最近的非static定位祖先元素；fixed是固定定位，元素的位置相對于視窗；sticky則是粘性定位，元素在跨越特定閾值前為相對定位，之后為固定定位。

接下來，我們可以看一些CSS定位的拓展效果。

1. 懸停顯示效果

.hover {
position:relative;
}
.hover:hover .tooltip {
display:block;
position:absolute;
top:100%;
left:50%;
transform:translateX(-50%);
}

這個效果可以讓我們在鼠標懸停在某個元素上時，顯示一個浮動框。”

2. 懸浮效果

.float {
position:fixed;
bottom:0;
left:0;
width:100%;
z-index:999;
}

這個效果可以讓我們創建一個懸浮在最底部的元素。這個元素在滾動網頁時會一直保持在底部。

3. 左中右定位效果

.left {
position:absolute;
left:0;
}
.center {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.right {
position:absolute;
right:0;
}

這個效果可以讓我們將元素分別靠左、居中、靠右定位。

CSS定位效果是網頁布局不可或缺的一部分，通過上述拓展效果能夠更好地實現網頁的視覺效果。學習好CSS定位，才能更好地制作出優美的網頁。