對(duì)于html中position的幾種屬性值的詳細(xì)說(shuō)明
發(fā)表時(shí)間：2024-01-01 來(lái)源：明輝站整理相關(guān)軟件相關(guān)文章人氣：
[摘要]position的幾種屬性值：static, relative, absolute, fixed, inherit<html ><head><meta http-equiv="content-type" content="text/htm...
position的幾種屬性值：static, relative, absolute, fixed, inherit
<html ><head><meta http-equiv="content-type" content="text/html" charset="gb2312"><style> *{margin:0;padding:0} </style> </head> <body>
<p style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">
<p style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></p>
<p style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></p>
<p style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></p>
</p>
<p style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></p></body> </html>效果截圖
紫色(brown)的是static的，所以它的left和top沒(méi)有起作用，一直跑到最上面去了
黑色（black）的是fixed的，所以它直接以瀏覽器窗口開(kāi)始計(jì)算left和top的值
紅色(red)和藍(lán)色(blue)分別是absolute和relative他們都是從父對(duì)象開(kāi)始計(jì)算left和top的值，只是因?yàn)橛幸粋�(gè)是absolute所以產(chǎn)生了重疊效果，沒(méi)有被另外一個(gè)擠走。
inherit是繼承的意思，也就是使用和上一級(jí)父元素同樣的width。其他的規(guī)則也是如此，inherit就表示繼承父元素的值。
同時(shí)我也明白了另外一個(gè)道理，因?yàn)槟J(rèn)的類(lèi)型都是static，所以當(dāng)我們的頁(yè)面長(zhǎng)度等定位的不合理時(shí)一個(gè)會(huì)把一個(gè)擠走。
以上就是關(guān)于html中position的幾種屬性值的詳解的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章！
網(wǎng)站建設(shè)是一個(gè)廣義的術(shù)語(yǔ)，涵蓋了許多不同的技能和學(xué)科中所使用的生產(chǎn)和維護(hù)的網(wǎng)站。
