1.元素定位

為了實(shí)現(xiàn)網(wǎng)頁(yè)整體布局，我們先要知道，一個(gè)元素，是如何定位到頁(yè)面上的某個(gè)位置的，這就是元素定位。

元素定位有四種，可以使用position樣式來(lái)設(shè)置元素定位，所以此屬性值有四種：

• static：靜態(tài)定位（默認(rèn)）。依據(jù)文檔流定位。
• relative：相對(duì)定位。以自身為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），不脫離文檔流。
• absolute：絕對(duì)定位。以父元素為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。
• fixed：固定定位。以瀏覽器窗口為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。

1.1.靜態(tài)定位（文檔流定位）

靜態(tài)定位：默認(rèn)。依據(jù)文檔流定位。

特點(diǎn)：

• 將頁(yè)面上的元素，按照html的書(shū)寫(xiě)順序，從上到下，從左到右，依次排列。
• 內(nèi)聯(lián)元素不獨(dú)占一行，塊級(jí)元素獨(dú)占一行。

<p>這是一個(gè)p標(biāo)簽</p>
<a href="">跳轉(zhuǎn)百度</a>
<span>這是一個(gè)內(nèi)聯(lián)的span標(biāo)簽</span>
<ul>
    <li>html</li>
    <li>css</li>
    <li>javascript</li>
</ul>

1.2.相對(duì)定位

相對(duì)定位：以自身為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），不脫離文檔流。

特點(diǎn)：

• 以自身為基準(zhǔn)定位。
• 不脫離文檔流。也就是說(shuō)：相對(duì)定位元素仍然會(huì)被文檔流中的其它元素所影響。
• 根據(jù)坐標(biāo)定位到新位置之后，并不回收原位置空間。

<style>
    .one{
        width: 200px;
        height: 100px;
        background-color: red;
        position: relative;
        left: 100px;
        top:50px;
    }
</style>
<p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p>
<div class="one"></div>

1.3.絕對(duì)定位

絕對(duì)定位：以父元素為基準(zhǔn)，設(shè)置坐標(biāo)，脫離文檔流。

特點(diǎn)：

• 脫離文檔流。也就是說(shuō)：絕對(duì)定位元素將不在被文檔流中的其它元素所影響。
• 根據(jù)坐標(biāo)定位到新位置之后，原位置空間會(huì)被回收。
• 如果父元素也為relative或absolute定位，那么就以父元素為基準(zhǔn)。
• 如果父元素不是relative定位，也不是absolute定位，那么一律以body為基準(zhǔn)。

<style>
    .one{
        width: 200px;
        height: 100px;
        background-color: red;
        position: absolute;
        left: 100px;
        top:50px;
    }
</style>
<p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p>
<div class="one"></div>

1.4.固定定位

固定定位：以瀏覽器窗口為基準(zhǔn)，設(shè)置坐標(biāo)（left、top、right、bottom），脫離文檔流。

特點(diǎn)：

• 元素始終固定在某個(gè)坐標(biāo)位置，body以及body中的任何元素都不會(huì)對(duì)其產(chǎn)生任何影響。

<style>
    .one{
        width: 100%;
        height: 60px;
        background-color: red;
        position: fixed;
        left: 0;
        top:0;
    }
</style>
<div class="one">header</div>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>
<p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p><p>這是一個(gè)p標(biāo)簽</p>

1.5.元素定位總結(jié)

• 絕對(duì)定位不能有效擴(kuò)展和維護(hù)。只能應(yīng)用在某個(gè)局部。
• 相對(duì)定位只限制自身，只能應(yīng)用在某個(gè)局部。
• 固定定位只限制自身，只能應(yīng)用在某個(gè)局部。
• 所以在實(shí)際開(kāi)發(fā)中，都使用文檔流定位來(lái)進(jìn)行頁(yè)面布局，就是靜態(tài)定位（默認(rèn)）。它能夠隨著頁(yè)面元素的變化而自動(dòng)調(diào)節(jié)。

1.6.z-index樣式

絕對(duì)定位元素與固定定位元素脫離了文檔流，可以把它想象為：此元素漂浮在網(wǎng)頁(yè)上方。 那么，當(dāng)這些元素位置有重疊時(shí)，就會(huì)出現(xiàn)：元素之間如何覆蓋的問(wèn)題。此問(wèn)題可以使用z-index樣式來(lái)解決。

z-index樣式的值是一個(gè)整形數(shù)，就表示元素所在的層級(jí)。

<style>
    .one{
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
        left: 0;
        top:0;
        z-index: 2;
    }
    .two{
        width: 200px;
        height: 200px;
        background-color: blue;
        position: absolute;
        left: 100px;
        top:100px;
        z-index: 1;
    }
</style>
<div class="one"></div>
<div class="two"></div>

到此這篇關(guān)于HTML5元素定位的文章就介紹到這了,更多相關(guān)HTML5元素定位內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論