HTML中的定位

次我們來說一下，HTML網(wǎng)頁中的定位，有很多小伙伴一定好奇，為什么我們寫的代碼都是按順序羅列的而在網(wǎng)頁的展示效果中，我們的各種樣式，標(biāo)簽，圖片等東西都是出現(xiàn)在網(wǎng)頁的各個位置，網(wǎng)頁看起來很美觀，各種盒模型擺放合理，這是因?yàn)樵贖TML中有定位的能力，今天我們就來學(xué)習(xí)一下。

position在英語中是位置的意思，而在我們CSS代碼中position也是跟位置有關(guān)的，position有三個屬性值分別為relative（相對定位：相對于自己原來的位置進(jìn)行定位，但保留自己原來的位置，別的元素?zé)o法占用），absolute（絕對定位：相對于有定位的父級進(jìn)行定位，如果沒有則相對于文檔進(jìn)行定位，定位會脫離文檔，不保留原來的位置，會和原來的文檔不在一個層），fixed（位置定位：他的位置不會隨著滑輪的滾動而改變較常見于彈窗廣告，他也會脫離文檔流）。

我們說完了position，接下來我們就說說他是怎么進(jìn)行定位的，我們有l(wèi)eft，top，right，bottom，五個屬性分別對應(yīng) 距左邊，距上邊，距右邊，距下邊，大家注意到我在每個方向前都加了個距字，我們所做的定位是距各個方向的距離而不是移動，例：left:200px，是向右移動200像素，他的意思是距離左邊增加200像素。在我們實(shí)際的編程中一般都不常用bottom，我們知道，滑輪是可以一直往下滑的，所以我們相對于底部定位的話就很困難。

我們來通過代碼和結(jié)果來看一下：

沒有定位的樣式

加了relative

加了relative的結(jié)果

上面這個結(jié)果圖看著比例不太對是因?yàn)樽髡呓貓D沒截好[捂臉]

我們可以看出貓圖片并沒有移動，而是給兔子圖片留著位置。

加了absolute

加了absolute的結(jié)果

這個結(jié)果我們可以看出貓圖片向前移動了，并沒有保留兔子圖片原來的位置

加了fixed

代碼中的<br>是為了使滑輪可以滑動，以便更好的展示效果。

用了fixed的效果展示。

以上的代碼樣式只對兔子圖片起作用，我沒有給貓?zhí)砑尤魏螛邮剑垐D片只是作為參照物。

家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS定位。

一、Position(定位)

CSS定位屬性允許你為一個元素定位。它也可以將一個元素放在另一個元素后面，并指定一個元素的內(nèi)容太大時，應(yīng)該發(fā)生什么。

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

二、屬性

1. Static 定位（默認(rèn)效果）

HTML元素的默認(rèn)值，即沒有定位，元素出現(xiàn)在正常的流中。

靜態(tài)定位的元素不會受到top, bottom, left, right影響。

2. Fixed 定位

元素的位置相對于瀏覽器窗口是固定位置。

即使窗口是滾動的它也不會移動：

<!DOCTYPE html>
<html>
        <meta charset="utf-8">
        <meta name="viewport" content="width=640, user-scalable=no">
    <head>
        <style>
            p.pos_fixed {
                position: fixed;
                top: 30px;
                right: 5px;
            }
</style>
    </head>


    <body>


        <p class="pos_fixed">Some more text</p>
        <p><b>Note:</b> 代碼使人進(jìn)步！！！.</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>
        <p>Some text</p>


    </body>


</html>

注意：

Fixed定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

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

3. Relative 定位

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

<!DOCTYPE html>
<html>
    <meta charset="utf-8">
    <meta name="viewport" content="width=640, user-scalable=no">
    <title> 定位</title>


    <head>
        <style>
            h2.pos_left {
                position: relative;
                left: -20px;
            }


            h2.pos_right {
                position: relative;
                left: 20px;
            }
</style>
    </head>


    <body style="background-color:azure;">


        <p>Some more text</p>
        <p><b>Note:</b> 代碼使人進(jìn)步！！！.</p>
        <h2 class="pos_left">This heading is moved left according to its normal position</h2>
        <h2 class="pos_right">This heading is moved right according to its normal position</h2>


    </body>


</html>

可以移動的相對定位元素的內(nèi)容和相互重疊的元素，它原本所占的空間不會改變。

h2.pos_top{
    position:relative;
    top:-50px;
}

相對定位元素經(jīng)常被用來作為絕對定位元素的容器塊。

4. Absolute 定位

絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于<html>:

h2{
    position:absolute;
    left:100px;
    top:150px;
}

Absolutely定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。

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

三、重疊的元素

元素的定位與文檔流無關(guān)，所以它們可以覆蓋頁面上的其它元素

z-index屬性指定了一個元素的堆疊順序（哪個元素應(yīng)該放在前面，或后面）

一個元素可以有正數(shù)或負(fù)數(shù)的堆疊順序：

img{
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

具有更高堆疊順序的元素總是在較低的堆疊順序元素的前面。

注意： 如果兩個定位元素重疊，沒有指定z - index，最后定位在HTML代碼中的元素將被顯示在最前面。

四、總結(jié)

本文基于Html基礎(chǔ)，主要介紹了CSS中四種定位的方式。對于四種的定位表現(xiàn)形式，用豐富的案例，代碼效果圖的展示，幫助大家更好理解。

最后，希望可以幫助大家更好的學(xué)習(xí)CSS3。

ss 中的定位，是布局中常用的一種方法，它可以使html元素脫離文檔流，重新定位。語法如下：

position: static|relative|absolute|fixed

position 有四個值，static（默認(rèn)靜態(tài)定位）、relative（相對定位）、absolute（絕對定位）、fixed（固定定位），通常配合left、top及z-index屬性使用（static除外）。

left —— 定位元素相對于定位點(diǎn)的左距離
top —— 定位元素相對于定位點(diǎn)的上距離
z-index ——定位元素的層級，當(dāng)有多個定位元素上，通過此屬性調(diào)整元素的顯示層級，值越大的顯示在最上面。默認(rèn)如果不設(shè)置z-index屬性，則會按照其在文檔流中的先后位置顯示。

static（靜態(tài)定位）

靜態(tài)定位很簡單，html元素默認(rèn)就是靜態(tài)定位，和正常情況下html元素在文檔流中的排版一樣。left、top和z-index屬性對應(yīng)靜態(tài)定位來說不起任何左右，如下圖示例：

圖1

圖1中的模塊1，雖然設(shè)置了position:static,但是其表現(xiàn)和沒有設(shè)置是一樣的，按照標(biāo)準(zhǔn)文檔流進(jìn)行排版。

relative（相對定位）

相對定位是html元素相對于它原來在標(biāo)準(zhǔn)文檔流中的位置來定位的。如果不設(shè)置top、left的話它和靜態(tài)定位一樣，不同之處就是它可以設(shè)置top、left和z-index屬性，如下圖示例：

代碼：

圖2

顯示效果：

圖3

圖3中模塊2使用了相對定位，脫離正常的文檔流，相對于原始位置左邊50px，頂部30px，但其在文檔流中的位置依然存在，只是視覺上相對原來的位置有偏移。

相對定位的元素寬度默認(rèn)和塊級元素一樣，寬度100%；

absolute（絕對定位）

絕對定位時當(dāng)父級元素也是定位元素（包括相對定位、絕對定位、固定定位）時，它就相對于父級元素的左上角定位，如果父級元素沒有定位或者是靜態(tài)定位，那就相對于瀏覽器窗口左上角定位。如下示例：

代碼：

圖4

顯示效果：

圖5

圖5中模塊3和模塊2-1都設(shè)置為絕對定位，模塊3的父級沒有定位，模塊2-1的父級是模塊2（相對定位）。所以模塊3相對于頁面左上角位置定位，模塊2-1相對于模塊2左上角定位。

絕對定位不保留原來的位置，完全是脫離文檔流，且其寬度變成不是100%（類似行內(nèi)元素），它通常都是和有定位的父級元素一塊使用才有意義。

fixed（固定定位）

固定定位，通俗講就是固定到屏幕上，它和絕對定位一樣完全脫離文檔流，不保留原來的空間位置。唯一的區(qū)別就是它是始終都是相對于瀏覽器窗口左上角定位，不管其父級元素設(shè)置了定位。如下示例：

代碼：

圖6

顯示效果：

圖7

圖7中模塊4的設(shè)置為固定定位，它的父級時模塊2（相對定位），可以看出和模塊2-1（絕對定位）的區(qū)別，模塊4不是相對于父級的。

再看下面這個示例，當(dāng)滾動滾動條時模塊4始終定在那塊不動。

圖8

關(guān)于z-index

注意看上面圖8中，模塊4顯示在模塊3下面，看下圖模塊3的z-index明明比模塊4的小，為什么會顯示在模塊4上面？

圖9

原因是模塊4的父級模塊（相對定位），它的z-index是100和模塊3相同，又因?yàn)槟K3元素在模塊2元素后面，所以模塊3顯示在模塊4上面，如果把模塊2的z-index改成101，如下圖：

圖10

模塊4顯示在模塊3上面了，所以z-index的屬性是同級元素相互進(jìn)行比較大小。

總結(jié)

在網(wǎng)頁布局中，定位在早期使用較多，現(xiàn)在不建議過多使用定位，只有在特殊情況下使用，比如返回頂部按鈕效果，或左側(cè)導(dǎo)航欄，菜單欄固定定位，不跟隨頁面滾動等。

本篇主要知識點(diǎn)：

定位	行為	在文檔流中
static	默認(rèn)行為；元素按順序堆疊并相互了解	是的
relative	相對于其在流中的原始位置定位	是的
fixed	相對于瀏覽器窗口定位	不在
absolute	相對于最近的非靜態(tài) ( fixed, relative, absolute) 元素定位	不在

感謝關(guān)注，歡迎指正錯誤及補(bǔ)充。

上篇：前端入門——浮動float

在線咨詢

上一篇：HTML、CSS、JavaScript及相互關(guān)系
下一篇：純CSS絲滑邊框線條動畫

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

HTML中的定位

家好，我是IT共享者，人稱皮皮。這篇我們來講講CSS定位。

一、Position(定位)

二、屬性

1. Static 定位（默認(rèn)效果）

2. Fixed 定位

3. Relative 定位

4. Absolute 定位

三、重疊的元素

四、總結(jié)

static（靜態(tài)定位）

relative（相對定位）

absolute（絕對定位）

fixed（固定定位）

關(guān)于z-index

總結(jié)

您的項目需求