HTML中的定位

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

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

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

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

沒有定位的樣式

加了relative

加了relative的結(jié)果

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

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

加了absolute

加了absolute的結(jié)果

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

加了fixed

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

用了fixed的效果展示。

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

SS 有兩個(gè)最重要的基本屬性，前端開發(fā)必須掌握：display和position。

display屬性指定網(wǎng)頁的布局。兩個(gè)重要的布局，我已經(jīng)介紹過了：彈性布局flex^[1]和網(wǎng)格布局grid^[2]。

本文介紹非常有用的position屬性。我希望通過10分鐘的閱讀，幫助大家輕松掌握網(wǎng)頁定位，說清楚瀏覽器如何計(jì)算網(wǎng)頁元素的位置，尤其是新引進(jìn)的sticky定位。

本文由國(guó)內(nèi)最大的在線教育平臺(tái)之一“騰訊課堂”^[3]贊助。他們現(xiàn)在啟動(dòng)了“騰訊課堂101計(jì)劃”^[4]，推廣平臺(tái)上的課程資源，有不少優(yōu)質(zhì)內(nèi)容。希望提高前端技術(shù)水平的同學(xué)，可以留意一下本文結(jié)尾的免費(fèi)課程信息。

一、position 屬性的作用

position屬性用來指定一個(gè)元素在網(wǎng)頁上的位置，一共有5種定位方式，即position屬性主要有五個(gè)值。

?static?relative?fixed?absolute?sticky

下面就依次介紹這五個(gè)值。最后一個(gè)sticky是2017年瀏覽器才支持的，本文將重點(diǎn)介紹。

二、static 屬性值

static是position屬性的默認(rèn)值。如果省略position屬性，瀏覽器就認(rèn)為該元素是static定位。

這時(shí)，瀏覽器會(huì)按照源碼的順序，決定每個(gè)元素的位置，這稱為“正常的頁面流”（normal flow）。每個(gè)塊級(jí)元素占據(jù)自己的區(qū)塊（block），元素與元素之間不產(chǎn)生重疊，這個(gè)位置就是元素的默認(rèn)位置。

注意，static定位所導(dǎo)致的元素位置，是瀏覽器自主決定的，所以這時(shí)top、bottom、left、right這四個(gè)屬性無效。

三、relative，absolute，fixed

relative、absolute、fixed這三個(gè)屬性值有一個(gè)共同點(diǎn)，都是相對(duì)于某個(gè)基點(diǎn)的定位，不同之處僅僅在于基點(diǎn)不同。所以，只要理解了它們的基點(diǎn)是什么，就很容易掌握這三個(gè)屬性值。

這三種定位都不會(huì)對(duì)其他元素的位置產(chǎn)生影響，因此元素之間可能產(chǎn)生重疊。

3.1 relative 屬性值

relative表示，相對(duì)于默認(rèn)位置（即static時(shí)的位置）進(jìn)行偏移，即定位基點(diǎn)是元素的默認(rèn)位置。

它必須搭配top、bottom、left、right這四個(gè)屬性一起使用，用來指定偏移的方向和距離。

div { position: relative; top: 20px;}

上面代碼中，div元素從默認(rèn)位置向下偏移20px（即距離頂部20px）。

3.2 absolute 屬性值

absolute表示，相對(duì)于上級(jí)元素（一般是父元素）進(jìn)行偏移，即定位基點(diǎn)是父元素。

它有一個(gè)重要的限制條件：父元素不能是static定位，否則定位基點(diǎn)就會(huì)變成整個(gè)網(wǎng)頁的根元素html。另外，absolute定位也必須搭配top、bottom、left、right這四個(gè)屬性一起使用。

/* HTML 代碼如下 <div id="father"> <div id="son"></div> </div>*/
#father { positon: relative;}#son { position: absolute; top: 20px;}

上面代碼中，父元素是relative定位，子元素是absolute定位，所以子元素的定位基點(diǎn)是父元素，相對(duì)于父元素的頂部向下偏移20px。如果父元素是static定位，上例的子元素就是距離網(wǎng)頁的頂部向下偏移20px。

注意，absolute定位的元素會(huì)被“正常頁面流”忽略，即在“正常頁面流”中，該元素所占空間為零，周邊元素不受影響。

3.3 fixed 屬性值

fixed表示，相對(duì)于視口（viewport，瀏覽器窗口）進(jìn)行偏移，即定位基點(diǎn)是瀏覽器窗口。這會(huì)導(dǎo)致元素的位置不隨頁面滾動(dòng)而變化，好像固定在網(wǎng)頁上一樣。

它如果搭配top、bottom、left、right這四個(gè)屬性一起使用，表示元素的初始位置是基于視口計(jì)算的，否則初始位置就是元素的默認(rèn)位置。

div { position: fixed; top: 0;}

上面代碼中，div元素始終在視口頂部，不隨網(wǎng)頁滾動(dòng)而變化。

四、sticky 屬性值

sticky跟前面四個(gè)屬性值都不一樣，它會(huì)產(chǎn)生動(dòng)態(tài)效果，很像relative和fixed的結(jié)合：一些時(shí)候是relative定位（定位基點(diǎn)是自身默認(rèn)位置），另一些時(shí)候自動(dòng)變成fixed定位（定位基點(diǎn)是視口）。

因此，它能夠形成“動(dòng)態(tài)固定”的效果。比如，網(wǎng)頁的搜索工具欄，初始加載時(shí)在自己的默認(rèn)位置（relative定位）。

頁面向下滾動(dòng)時(shí)，工具欄變成固定位置，始終停留在頁面頭部（fixed定位）。

等到頁面重新向上滾動(dòng)回到原位，工具欄也會(huì)回到默認(rèn)位置。

sticky生效的前提是，必須搭配top、bottom、left、right這四個(gè)屬性一起使用，不能省略，否則等同于relative定位，不產(chǎn)生“動(dòng)態(tài)固定”的效果。原因是這四個(gè)屬性用來定義“偏移距離”，瀏覽器把它當(dāng)作sticky的生效門檻。

它的具體規(guī)則是，當(dāng)頁面滾動(dòng)，父元素開始脫離視口時(shí)（即部分不可見），只要與sticky元素的距離達(dá)到生效門檻，relative定位自動(dòng)切換為fixed定位；等到父元素完全脫離視口時(shí)（即完全不可見），fixed定位自動(dòng)切換回relative定位。

請(qǐng)看下面的示例代碼。（注意，除了已被淘汰的 IE 以外，其他瀏覽器目前都支持sticky。但是，Safari 瀏覽器需要加上瀏覽器前綴-webkit-。）

#toolbar { position: -webkit-sticky; /* safari 瀏覽器 */ position: sticky; /* 其他瀏覽器 */ top: 20px;}

上面代碼中，頁面向下滾動(dòng)時(shí)，#toolbar的父元素開始脫離視口，一旦視口的頂部與#toolbar的距離小于20px（門檻值），#toolbar就自動(dòng)變?yōu)?code>fixed定位，保持與視口頂部20px的距離。頁面繼續(xù)向下滾動(dòng)，父元素徹底離開視口（即整個(gè)父元素完全不可見），#toolbar恢復(fù)成relative定位。

五、 sticky 的應(yīng)用

sticky定位可以實(shí)現(xiàn)一些很有用的效果。除了上面提到“動(dòng)態(tài)固定”效果，這里再介紹兩個(gè)。

5.1 堆疊效果

堆疊效果（stacking）指的是頁面滾動(dòng)時(shí)，下方的元素覆蓋上方的元素。下面是一個(gè)圖片堆疊的例子，下方的圖片會(huì)隨著頁面滾動(dòng)，覆蓋上方的圖片（查看 demo^[5]）。

HTML 代碼就是幾張圖片。

<div><img src="pic1.jpg"></div><div><img src="pic2.jpg"></div><div><img src="pic3.jpg"></div>

CSS 代碼極其簡(jiǎn)單，只要兩行。

div { position: sticky; top: 0;}

它的原理是頁面向下滾動(dòng)時(shí)，每張圖片都會(huì)變成fixed定位，導(dǎo)致后一張圖片重疊在前一張圖片上面。詳細(xì)解釋可以看這里^[6]。

5.2 表格的表頭鎖定

大型表格滾動(dòng)的時(shí)候，表頭始終固定，也可以用sticky實(shí)現(xiàn)（查看 demo^[7]）。

CSS 代碼也很簡(jiǎn)單。

th { position: sticky; top: 0; }

需要注意的是，sticky必須設(shè)在<th>元素上面，不能設(shè)在<thead>和<tr>元素，因?yàn)檫@兩個(gè)元素沒有relative定位，也就無法產(chǎn)生sticky效果。詳細(xì)解釋可以看這里^[8]。

（正文完）

免費(fèi)前端全棧課程

初學(xué)者剛接觸前端，往往會(huì)被一大堆技術(shù)名詞、框架和工具，搞得眼花繚亂。

到底哪些技術(shù)是目前的主流技術(shù)棧，既能用于公司的開發(fā)實(shí)務(wù)，又能為自己的簡(jiǎn)歷增添亮點(diǎn)？

下面就是一套目前主流的前端技術(shù)棧。

（1）Node.js：服務(wù)器端的 JavaScript 運(yùn)行環(huán)境，不管哪種前端開發(fā)，都必不可少的底層環(huán)境。

（2）Webpack：語法轉(zhuǎn)換工具，把 ES6/TypeScript/JSX 語法轉(zhuǎn)成瀏覽器可以運(yùn)行的代碼。

（3）Koa2：一個(gè)非常流行、簡(jiǎn)潔強(qiáng)大的 Node.js 后端的 Web 開發(fā)框架。

（4）MongoDB：目前應(yīng)用最廣泛的非關(guān)系數(shù)據(jù)庫之一，功能豐富，用法較簡(jiǎn)單。

（5）Vue 全家桶：

?Vue：前端基礎(chǔ)框架?Vuex：配套的前端狀態(tài)管理庫。?Vue Router：官方的路由插件，構(gòu)建單頁面應(yīng)用必不可少。?Vue CLI：腳手架工具，幫你快速上手 Vue 開發(fā)，無需再花多余時(shí)間去實(shí)現(xiàn)項(xiàng)目架構(gòu)。?Vant：有贊前端團(tuán)隊(duì)開發(fā)的輕量級(jí)移動(dòng)端 Vue 組件庫，讓你快速使用已經(jīng)封裝好的各種頁面組件。

看到這個(gè)名單，你是不是感到有點(diǎn)頭大，全部掌握它們需要多少時(shí)間啊？

現(xiàn)在，騰訊課堂就有一門這樣的課程，內(nèi)容包含了所有這些工具，教你怎么用它們從頭完成一個(gè)全棧項(xiàng)目，親手做出一個(gè)手機(jī)端的移動(dòng)商城，是由 慕課網(wǎng)的精英講師--謝成老師講授。

該課程的制作單位是青盟科技。它是《騰訊課堂101計(jì)劃》重點(diǎn)推廣的優(yōu)質(zhì)機(jī)構(gòu)，已有7年 IT 行業(yè)教學(xué)經(jīng)驗(yàn)，培養(yǎng)收費(fèi)學(xué)員2000+，有超過72%的學(xué)員都進(jìn)入到名企大廠。如果你想了解課程的詳細(xì)內(nèi)容，獲取課程大綱，或者想接受系統(tǒng)的前端培訓(xùn)，可以登錄騰訊課堂查看“青盟科技”。

（完）

References

[1]彈性布局flex:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[2]網(wǎng)格布局grid:http://www.ruanyifeng.com/blog/2019/03/grid-layout-tutorial.html

[3]“騰訊課堂”:https://ke.qq.com/?utm=ruanyifeng

[4]“騰訊課堂101計(jì)劃”:https://edu.qq.com/a/20190119/005414.htm

[5]demo:https://jsbin.com/fegiqoquki/edit?html,css,output

[6]這里:https://dev.to/vinceumo/slide-stacking-effect-using-position-sticky-91f

[7]demo:https://jsbin.com/decemanohe/edit?html,css,output

[8]這里:https://css-tricks.com/position-sticky-and-table-headers/

什么需要定位?

浮動(dòng)可以讓多個(gè)塊級(jí)盒子一行沒有縫隙排列顯示,多用于橫向排列盒子.
定位則可讓盒子自由地在某個(gè)盒子內(nèi)移動(dòng)或者固定屏幕某個(gè)位置,并且可以壓住其他盒子.

定位組成

定位:將盒子定在某一個(gè)位置

定位=定位模式+邊偏移

定位模式~>指定一個(gè)元素在文檔中的定位方式

div {
        /* 定位模式 值
        static~>靜態(tài)定位 (默認(rèn)方式) 無定位
        relative~>相對(duì)定位 
        absolute~>絕對(duì)定位 
        fixed~>固定定位 */
        position: static;
    }

邊的偏移~>決定了該元素的最終位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            position: absolute;
            /* 偏移方向:偏移距離 上 下 左 右 */
            top: 100px;
            bottom: 100px;
            left: 100px;
            right: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div>盒子A</div>
</body>

</html>

相對(duì)定位 relative

相對(duì)定位是元素在移動(dòng)位置的時(shí)候,相當(dāng)于它原來的位置

特點(diǎn):

移動(dòng)位置的時(shí)候參照點(diǎn)是自己原來的位置
原來在標(biāo)準(zhǔn)流的位置繼續(xù)占有.后面盒子仍然以標(biāo)準(zhǔn)流的方式對(duì)于它

實(shí)踐效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .Lazy {
            position: relative;
            top: 100px;
            left: 100px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Lazy">懶羊羊</div>
    <div>喜羊羊</div>
</body>

</html>

絕對(duì)定位 absolute

絕對(duì)定位是元素在移動(dòng)位置的時(shí)候,是相對(duì)于它祖先的元素來說的

特點(diǎn):

如果沒有祖先元素/祖先元素沒有定位,則以瀏覽器為準(zhǔn)定位(Document文檔)
絕對(duì)定位不再占有原先的位置
如果祖先的元素有定位(相對(duì) 絕對(duì) 固定),則以最近一級(jí)有定位祖先為參考點(diǎn)移動(dòng)位置

實(shí)踐

1.祖先元素?zé)o定位以瀏覽器為基礎(chǔ)

效果展示:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         .Pleasant {
            float: right;
            width: 400px;
            height: 400px;
            background-color: pink;
        }

        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="Pleasant">
        喜羊羊 
        <div class="small-bell">鈴鐺</div>
    </div>

</body>

</html>

2.祖先有定位以上一級(jí)為基礎(chǔ)

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .sheep {
          position: absolute;
          background-color: sandybrown;
          width: 600px;
          height: 600px;
        }
        .Pleasant {
            position: absolute;
            bottom: 50px;
            width: 400px;
            height: 400px;
            background-color: pink;
        }
        .small-bell {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 50px;
            background-color: lightsteelblue;
        }
    </style>
</head>

<body>
    <div class="sheep">
        
        <div class="Pleasant">
            喜羊羊 
            <div class="small-bell">鈴鐺</div>
        </div>
    </div>

</body>

</html>

子絕父相

子級(jí)是絕對(duì)定位的話父級(jí)要用相對(duì)定位

使用原因:

子盒子絕對(duì)定位,不會(huì)占有位置,可以放到父盒子里面的任何一個(gè)地方,不影響其他兄弟盒子
父盒子需要加定位限制子盒子在父盒子內(nèi)顯示
父盒子布局時(shí),需要占有位置,因此父盒子只能相對(duì)定位

總結(jié):父級(jí)需要占用位置,則選相對(duì)定位.子盒子不需要占位置,則選擇絕對(duì)定位

但是不是一成不變 按需求來開發(fā) 靈活變動(dòng)

實(shí)踐

使用效果

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    .box {
        height: 240px;
        padding: 20px 5px;
        border: 1px solid coral;
    }
    .goods {
        position: relative;
        width: 200px;
        height: 200px;
    }
    .goods .hot {
       position: absolute;
       top: -7px;
       right: -10px;
       width: 25px;
    }
</style>
<body>
    <div class="box">
        <div class="goods">
            <img class="hot" src="img/hot.png" alt="">
            <img src="img/thing.png" alt="">
        </div>
    </div>
</body>
</html>

固定定位 fixed

固定定位是元素固定于瀏覽器可視區(qū)域的位置

特點(diǎn)

1.以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素(跟父元素沒有任何關(guān)系,不隨滾動(dòng)條滾動(dòng))

2.固定定位不再占有原先的位置

大廠使用案例:

實(shí)踐

效果展示

代碼展示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }
    /* 固定標(biāo)簽的基本用法 */
    .navigation {
        position: fixed;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
    /* 小技巧 固定在版心右側(cè)位置 */
    /* 
    1.讓固定定位的盒子left:50% 走到瀏覽器可視區(qū)的一半位置 
    2.讓固定定位的盒子margin-left:版心寬度的一半距離(如此案例 900px寬度 一半450px 為了存在縫隙 可多些距離) 多走版心寬度的一半位置
    就實(shí)現(xiàn)讓固定定位的盒子貼著版心右側(cè)對(duì)齊了
    */
    .tag {
       width: 50px;
       height: 50px;
       background-color: #12a182;
       position: fixed;
       top: 100px;
       left: 50%;
       margin-left: 455px;
    }
</style>
<body>
    <div class="core">
        <div class="navigation"></div>
        <div class="tag">TAG</div>
    </div>
</body>
</html>

?粘性定位 sticky

粘性定位可以被認(rèn)為是相對(duì)定位和固定定位的混合

特點(diǎn)

以瀏覽器的可視窗口為參照點(diǎn)移動(dòng)元素
占有原先的位置(相對(duì)定位的特點(diǎn))
必須添加top left right bottom 其中一個(gè)才有效
跟頁面滾動(dòng)搭配使用

大廠使用案例:

實(shí)踐

使用效果:

代碼展示:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>fixed</title>
</head>
<style>
    .core {
        width: 900px;
        height: 1300px;
        margin: 0 auto;
        background-color: #11659a;
    }

    /* 固定標(biāo)簽的基本用法 */
    .navigation {
        position: sticky;
        /* 必須存在一個(gè)偏移量 */
        top: 0;
        width: 900px;
        height: 50px;
        background-color: darkgoldenrod;
    }
</style>

<body>
    <div class="core">
        <div class="navigation"></div>
        <span>河邊蘆葦密又繁，秋深露水結(jié)成霜。意中之人在何處？就在河水那一方。</span>
        <br>
        <span> 逆著流水去找她，道路險(xiǎn)阻又太長(zhǎng)。順著流水去找她，仿佛在那水中央。</span>
        <br>
        <span>河邊蘆葦密又繁，清晨露水未曾干。意中之人在何處？就在河岸那一邊。</span>
        <br>
        <span>逆著流水去找她，道路險(xiǎn)阻攀登難。順著流水去找她，仿佛就在水中灘。</span>
        <br>
        <span>河邊蘆葦密稠稠，早晨露水未全收。意中之人在何處？就在水邊那一頭。</span>
        <br>
        <span>逆著流水去找她，道路險(xiǎn)阻曲難求。順著流水去找她，仿佛就在水中洲。</span>
    </div>
</body>

</html>

定位小總結(jié)?

定位模式	是否脫標(biāo)	移動(dòng)位置
static(默認(rèn))	否	不能使用邊偏移
relative	否(占有位置)	相對(duì)于自身位置移動(dòng)
absolute	是(不占有位置)	帶有定位的父級(jí)
fixed	是(不占有位置)	瀏覽器可視區(qū)
sticky	否(占有位置)	瀏覽器可視區(qū)

定位疊放次序 z-index

在使用定位布局時(shí),可能會(huì)出現(xiàn)盒子重疊的情況.

可以使用z-index來控制盒子的前后次序 z軸

數(shù)值可為正/負(fù)/0(無單位) 默認(rèn)auto,數(shù)值越大,盒子越靠上
如果屬性值相同,則按照書寫順序,后來居上
只有定位盒子才有z-index屬性

實(shí)踐

效果展示

代碼展示

無z-index時(shí)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強(qiáng)</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

有z-index時(shí)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
    div {
        position: absolute;
        width: 300px;
        height: 300px;
    }

    div:nth-child(1) {
        background-color: lightblue;
        top: 50px;
        left: 50px;
        /* 層級(jí)排上 */
        z-index: 1;
    }

    div:nth-child(2) {
        background-color: lightpink;
        top: 100px;
        left: 100px;
    }

    div:nth-child(3) {
        background-color: lightyellow;
        top: 150px;
        left: 150px;
    }
</style>

<body>
    <div>光頭強(qiáng)</div>
    <div>熊大</div>
    <div>熊二</div>
</body>

</html>

定位拓展

1.絕對(duì)定位的盒子居中?

加了絕對(duì)定位的盒子不能通過margin:0 auto水平居中,但是通過計(jì)算實(shí)現(xiàn)水平和垂直居中

left:50% 讓盒子的左側(cè)移動(dòng)到父級(jí)元素的中心位置
margin-left:-1/2*元素寬度讓盒子向左移動(dòng)自身寬度的一半

2.定位特殊特性

行內(nèi)元素添加絕對(duì)或者固定定位,可以直接設(shè)置高度和寬度
塊級(jí)元素添加絕對(duì)或者固定定位,如果不給寬度或者高度,默認(rèn)大小是內(nèi)容的大小

3.脫標(biāo)的盒子不會(huì)觸發(fā)外邊距塌陷

浮動(dòng)元素,絕對(duì)定位(固定定位) 元素的都不會(huì)觸發(fā)外邊距合并的問題.

外邊距塌陷:兩個(gè)嵌套關(guān)系的（父子關(guān)系）塊元素，當(dāng)父元素有上外邊距或者沒有上外邊距（margin-top），子元素也有上外邊距的時(shí)候。兩個(gè)上外邊距會(huì)合成一個(gè)上外邊距，以相對(duì)較大的上外邊距值為準(zhǔn)(下邊距一樣)。左右邊距不會(huì)出現(xiàn)這種問題。

4.絕對(duì)定位(固定定位)會(huì)完全壓住盒子

絕對(duì)定位(固定定位)會(huì)壓住下面標(biāo)準(zhǔn)流所有的內(nèi)容[包括文字浮動(dòng)不會(huì)壓住文字]

在線咨詢

上一篇：前端基礎(chǔ)：HTML
下一篇：推薦幾個(gè)個(gè)人精美網(wǎng)站響應(yīng)式html5網(wǎng)站模板

您的項(xiàng)目需求

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

整合營(yíng)銷服務(wù)商

HTML中的定位

一、position 屬性的作用

二、static 屬性值

三、relative，absolute，fixed

3.1 relative 屬性值

3.2 absolute 屬性值

3.3 fixed 屬性值

四、sticky 屬性值

五、 sticky 的應(yīng)用

5.1 堆疊效果

5.2 表格的表頭鎖定

免費(fèi)前端全棧課程

References

什么需要定位?

定位組成

相對(duì)定位 relative

絕對(duì)定位 absolute

子絕父相

固定定位 fixed

?粘性定位 sticky

定位小總結(jié)?

定位疊放次序 z-index

定位拓展

您的項(xiàng)目需求