position：absolute與position：relative的區別
阿新 • • 發佈：2018-11-16
absolute意思為絕對的，relative意為相對的。然而其用法與我們平常所想的有所不同。
大多數人可能會覺得absolute絕對定位是根據瀏覽器視窗定位，實則不是。absolute定位是相對於父元素的絕對定位，且父元素必須有position：absolute或者position：relative，若其父元素沒有，則逐層網上尋找，直至瀏覽器視窗
relative相對定位是相對於當前位置定位，即相對於自己定位。
<html>
<head>
<style type="text/css">
h2.pos_left
{
position:relative;
left:-20px
}
h2.pos_right
{
position:relative;
left:20px
}
</style>
</head>
<body>
<h2>這是位於正常位置的標題</h2>
<h2 class="pos_left">這個標題相對於其正常位置向左移動</h2>
<h2 class="pos_right">這個標題相對於其正常位置向右移動</h2>
<p>相對定位會按照元素的原始位置對該元素進行移動。</p>
<p>樣式 "left:-20px" 從元素的原始左側位置減去 20 畫素。</p>
<p>樣式 "left:20px" 向元素的原始左側位置增加 20 畫素。</p>
</body>
</html>