關於 position 屬性：修訂版本之間的差異
| 第 38 行： | 第 38 行： | ||
'''absolute 定位於上層容器''' | '''absolute 定位於上層容器''' | ||
| + | <div style='position:relative;border:solid #6AC5AC 3px;'> | ||
| + | <span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'><div style='position:relative;'></span> | ||
| + | <p style='padding:1em;'> | ||
| + | 這個元素是相對定位的，如果它是 <code>position: static;</code>，那麼它的子元素如果套用「絕對定位」的話，就會跳過它，並直接參考 body 元素的相對位置。 | ||
| + | </p> | ||
| + | <div class="absolute elem elem-red"> | ||
| + | <span class="label"><div class="absolute"></span> | ||
| + | <p> | ||
| + | 這個元素被設定成絕對定位（<code>position: absolute;</code>），它會相對於它的父元素進行定位（相對於父元素的絕對定位）。 | ||
| + | </p> | ||
| + | <span class="endlabel"></div></span> | ||
| + | </div> | ||
| + | <span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'></div></span> | ||
| + | </div> | ||
2019年1月4日 (五) 15:39的修訂版本
static 靜態
<div style='position:static;'>
static 是預設值。任何套用 position:static; 的元素「不會被特別定位」在頁面上特定位置，而是照著瀏覽器預設的配置自動排版在頁面上，所有其他的屬性值都代表該元素會被定位在頁面上。
</div>
relative 相對於靜態位置
<div style='position:relative;'>
relative 表現的和 static 一樣，除非你增加了一些額外的屬性。
</div>
<div style='position:relative;width:600px;top:-20px;left:20px;'>
在一個設定為 position: relative 的元素內設定 top 、 right 、 bottom 和 left 屬性，會使其元素「相對地」調整其原本該出現的所在位置，而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間，都不會影響到原本其他元素所在的位置。
</div>
fixed 固定於瀏覽器座標
請看右下角的示範。固定定位元素不會保留它原本在頁面應有的空間，不會跟其他元素的配置互相干擾。
<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'>
固定於瀏覽器的右下角。
</div>
absolute 定位於上層容器
<div style='position:relative;'>
這個元素是相對定位的，如果它是 position: static;，那麼它的子元素如果套用「絕對定位」的話，就會跳過它，並直接參考 body 元素的相對位置。
<div class="absolute">
這個元素被設定成絕對定位（position: absolute;），它會相對於它的父元素進行定位（相對於父元素的絕對定位）。
</div>
</div>
