關於 position 屬性:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
第 29 行: 第 29 行:
  
 
請看右下角的示範。固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。
 
請看右下角的示範。固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。
<!--<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;border:solid #FDC72F 3px;background-color:white;'>
+
<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;border:solid #FDC72F 3px;background-color:white;'>
 
<span style='position:absolute;background-color:#FDC72F;color:#414142;top:0;left:0;'>&lt;div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'&gt;</span>
 
<span style='position:absolute;background-color:#FDC72F;color:#414142;top:0;left:0;'>&lt;div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'&gt;</span>
 
   <p style='padding:1em;'>
 
   <p style='padding:1em;'>
第 35 行: 第 35 行:
 
   </p>
 
   </p>
 
<span style='position:absolute;background-color:#FDC72F;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
 
<span style='position:absolute;background-color:#FDC72F;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
</div>-->
+
</div>
  
 
'''absolute 定位於上層容器'''
 
'''absolute 定位於上層容器'''
第 50 行: 第 50 行:
 
<span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
 
<span style='position:absolute;background-color:#6AC5AC;color:#414142;right:0;bottom:0;'>&lt;/div&gt;</span>
 
</div>
 
</div>
 +
 +
'''小結:'''
 +
#static 靜態(預設):循序排版
 +
#relative 相對:參考靜態位置
 +
#absolute 絕對:參考上層容器的邊框
 +
#fixed 固定:參考瀏覽器邊界

2019年1月6日 (日) 11:21的修訂版本

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 的元素內設定 toprightbottomleft 屬性,會使其元素「相對地」調整其原本該出現的所在位置,而不管這些「相對定位」過的元素如何在頁面上移動位置或增加了多少空間,都不會影響到原本其他元素所在的位置。

</div>

fixed 固定於瀏覽器座標

請看右下角的示範。固定定位元素不會保留它原本在頁面應有的空間,不會跟其他元素的配置互相干擾。

<div style='position:fixed;bottom:0;right:0;width:500px;z-index:9999;'>

固定於瀏覽器的右下角。

</div>

absolute 定位於上層容器

<div style='position:relative;height:195px;'>

這個元素是相對定位的,如果它是 position:static;,那麼它的子元素如果套用「絕對定位」的話,就會跳過它,並直接參考 body 元素的相對位置。

<div style='position:absolute;top:60px;right:10px;'>

這個元素被設定成絕對定位(position:absolute;),它會相對於它的父元素進行定位(相對於父元素的絕對定位)。

</div>

</div>

小結:

  1. static 靜態(預設):循序排版
  2. relative 相對:參考靜態位置
  3. absolute 絕對:參考上層容器的邊框
  4. fixed 固定:參考瀏覽器邊界