關於 position 屬性:修訂版本之間的差異
(未顯示同用戶所作出之61次版本) | |||
第 1 行: | 第 1 行: | ||
− | ''' | + | [[分類:CSS]] |
− | <div style='position: | + | '''static 靜態''' |
− | <span style='background-color:#6AC5AC;color:#414142;top:0;left:0;'><div style='position:static;'></span> | + | <div style='position:relative;border:solid #6AC5AC 3px;'> |
− | <p> | + | <span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'><div style='position:static;'></span> |
+ | <p style='padding:1em;'> | ||
<code>static</code> 是預設值。任何套用 <code>position:static;</code> 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。 | <code>static</code> 是預設值。任何套用 <code>position:static;</code> 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。 | ||
</p> | </p> | ||
− | <span></div></span> | + | <span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'></div></span> |
</div> | </div> | ||
− | ''' | + | '''relative 相對於靜態位置''' |
+ | <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>relative</code> 表現的和 <code>static</code> 一樣,除非你增加了一些額外的屬性。 | ||
+ | </p> | ||
+ | <span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'></div></span> | ||
+ | </div> | ||
+ | |||
+ | <div style='position:relative;width:600px;top:-20px;left:20px;border:solid #D64078 3px;background-color:white;'> | ||
+ | <span style='position:absolute;background-color:#D64078;color:#414142;top:0;left:0;'><div style='position:relative;width:600px;top:-20px;left:20px;'></span> | ||
+ | <p style='padding:1em;'> | ||
+ | 在一個設定為 <code>position: relative</code> 的元素內設定 <code>top</code> 、 <code>right</code> 、 <code>bottom</code> 和 <code>left</code> 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。 | ||
+ | </p> | ||
+ | <span style='position:absolute;background-color:#D64078;color:#414142;right:0;bottom:0;'></div></span> | ||
+ | </div> | ||
+ | |||
+ | '''fixed 固定於瀏覽器座標''' | ||
+ | |||
+ | 請看右下角的示範。固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。 | ||
+ | <div style='position:fixed;bottom:0;right:0;width:450px;z-index:9999;border:solid #FDC72F 3px;background-color:white;'> | ||
+ | <span style='position:absolute;background-color:#FDC72F;color:#414142;top:0;left:0;'><div style='position:fixed;bottom:0;right:0;z-index:9999;'></span> | ||
+ | <p style='padding:1em;'> | ||
+ | 固定於瀏覽器的右下角。 | ||
+ | </p> | ||
+ | <span style='position:absolute;background-color:#FDC72F;color:#414142;right:0;bottom:0;'></div></span> | ||
+ | </div> | ||
+ | |||
+ | '''absolute 定位於上層容器''' | ||
+ | <div style='position:relative;height:195px;border:solid #6AC5AC 3px;'> | ||
+ | <span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'><div style='position:relative;height:195px;'></span> | ||
+ | <p style='padding:1em;'>這個元素是相對定位的,如果它是 <code>position:static;</code>,那麼它的子元素如果套用「絕對定位」的話,就會跳過它,並直接參考 body 元素的相對位置。</p> | ||
+ | |||
+ | <div style='position:absolute;top:60px;right:0;width:500px;border:solid #D64078 3px;background-color:white;'> | ||
+ | <span style='position:absolute;background-color:#D64078;color:#414142;top:0;left:0;'><div style='position:absolute;top:60px;right:0;'></span> | ||
+ | <p style='padding:1em;'>這個元素被設定成絕對定位(<code>position:absolute;</code>),它會相對於它的父元素進行定位(相對於父元素的絕對定位)。</p> | ||
+ | <span style='position:absolute;background-color:#D64078;color:#414142;right:0;bottom:0;'></div></span> | ||
+ | </div> | ||
+ | |||
+ | <span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'></div></span> | ||
+ | </div> | ||
+ | |||
+ | '''小結:''' | ||
+ | #static 靜態(預設):循序排版 | ||
+ | #relative 相對:參考靜態位置 | ||
+ | #absolute 絕對:參考上層容器的邊框 | ||
+ | #fixed 固定:參考瀏覽器邊界 |
2024年7月7日 (日) 16:38的最新修訂版本
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;z-index:9999;'>
固定於瀏覽器的右下角。
</div>
absolute 定位於上層容器
<div style='position:relative;height:195px;'>
這個元素是相對定位的,如果它是 position:static;
,那麼它的子元素如果套用「絕對定位」的話,就會跳過它,並直接參考 body 元素的相對位置。
<div style='position:absolute;top:60px;right:0;'>
這個元素被設定成絕對定位(position:absolute;
),它會相對於它的父元素進行定位(相對於父元素的絕對定位)。
</div>
</div>
小結:
- static 靜態(預設):循序排版
- relative 相對:參考靜態位置
- absolute 絕對:參考上層容器的邊框
- fixed 固定:參考瀏覽器邊界