關於 position 屬性:修訂版本之間的差異
出自六年制學程
第 26 行: | 第 26 行: | ||
'''fixed 固定於瀏覽器座標''' | '''fixed 固定於瀏覽器座標''' | ||
− | <div style='position:fixed;bottom:0;right:0;width: | + | <div style='position:fixed;bottom:0;right:0;width:400px;z-index:9999;border:solid #FDC72F 3px;'> |
− | + | <span style='position:absolute;background-color:#FDC72F;color:#414142;top:0;left:0;'><div style='position:fixed;bottom:0;right:0;width:400px;z-index:9999;></span> | |
− | <p> | + | <p style='padding:1em;'> |
− | + | 固定於瀏覽器的右下角。 | |
</p> | </p> | ||
− | + | <span class="endlabel"></div></span> | |
</div> | </div> |
2019年1月3日 (四) 18:07的修訂版本
靜態 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:400px;z-index:9999;>
固定於瀏覽器的右下角。
</div>