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

出自六年制學程
跳轉到: 導覽搜尋
第 10 行: 第 10 行:
 
'''相對 relative'''
 
'''相對 relative'''
 
<div style='position:relative;border:solid #6AC5AC 3px;'>
 
<div style='position:relative;border:solid #6AC5AC 3px;'>
  <span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'>&lt;div style='position:relative;'&gt;></span>
+
<span style='position:absolute;background-color:#6AC5AC;color:#414142;top:0;left:0;'>&lt;div style='position:relative;'&gt;</span>
 
   <p style='padding:1em;'>
 
   <p style='padding:1em;'>
 
     <code>relative</code> 表現的和 <code>static</code> 一樣,除非你增加了一些額外的屬性。
 
     <code>relative</code> 表現的和 <code>static</code> 一樣,除非你增加了一些額外的屬性。
 
   </p>
 
   </p>
  <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>

2019年1月3日 (四) 17:40的修訂版本

靜態 static

<div style='position:static;'>

static 是預設值。任何套用 position:static; 的元素「不會被特別定位」在頁面上特定位置,而是照著瀏覽器預設的配置自動排版在頁面上,所有其他的屬性值都代表該元素會被定位在頁面上。

</div>

相對 relative

<div style='position:relative;'>

relative 表現的和 static 一樣,除非你增加了一些額外的屬性。

</div>