HTML 元素的預設值

xinhuaihuanxiang發表於2021-01-04

元素可以使用的頂部,底部,左側和右側屬性定位。然而,這些屬性無法工作,除非是先設定position屬性。他們也有不同的工作方式,這取決於定位方法。

static 定位
HTML 元素的預設值,即沒有定位,遵循正常的文件流物件。

靜態定位的元素不會受到 top, bottom, left, right影響。

例項
div.static {
position: static;
border: 3px solid #73AD21;
}
https://zhuanlan.zhihu.com/p/341817517
嘗試一下 »
fixed 定位
元素的位置相對於瀏覽器視窗是固定位置。

即使視窗是滾動的它也不會移動:

例項
p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

嘗試一下 »
注意: Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支援。
https://www.meipian.cn/3ckge7ko
Fixed定位使元素的位置與文件流無關,因此不佔據空間。

Fixed定位的元素和其他元素重疊。

relative 定位
相對定位元素的定位是相對其正常位置。

例項
h2.pos_left
{
position:relative;

相關文章