成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

探究position定位中absolute和relative的異同

NickZhou / 2963人閱讀

摘要：總結(jié)一下定位相對(duì)于誰(shuí)進(jìn)行定位有點(diǎn)復(fù)雜就是找出定位元素父元素鏈上的所有父元素，由近到遠(yuǎn)哪個(gè)元素不是默認(rèn)定位即定位的，那么就相對(duì)于它進(jìn)行定位。當(dāng)父元素鏈上所有父元素都是默認(rèn)定位，那么定位就是相對(duì)于元素的，效果和定位差不多。

相信學(xué)過(guò)CSS的同學(xué)都曾經(jīng)對(duì)于position的各種屬性很困惑，尤其是absolute和relative定位，簡(jiǎn)直就是傻傻分不清，筆者寫(xiě)這篇文章就是希望通過(guò)代碼實(shí)驗(yàn)的方式來(lái)揭露absolute和relative定位的本質(zhì)區(qū)別。

一、默認(rèn)定位

HTML結(jié)構(gòu)如下：

和

是為了與窗口的頂部隔開(kāi)距離便于觀察，neighboor和child2的div是為了對(duì)比位置，我們真正需要定位的焦點(diǎn)放在了child1的div上。

Position Attribute


Relative & Absolute

CSS如下：

.parent{
    background-color: yellow;
    height: 200px;
    width: 200px;
    display: inline-block;
}

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
}

.child2{
    background-color: royalblue;
    height: 50px;
    width: 50px;
}

.neighboor{
    background-color: pink;
    height: 200px;
    width: 200px;
    display: inline-block;
}

我們來(lái)看一下默認(rèn)定位的效果（特意留出地址欄方便觀察位置對(duì)比）

二、relative定位

首先我們來(lái)看一下官方的解釋?zhuān)荷上鄬?duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。我們來(lái)嘗試一下在child1中加入relative定位，并且輔以top和left位移值：

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: relative;
    top: 20px;
    left: 20px;
}

效果如下：

我們看到綠色方塊代表的child1和原來(lái)的位置相比top和left偏移了，但是其他的div都安分守己地待在原處，就好像child1的位移并沒(méi)有對(duì)它們?cè)斐扇魏斡绊憽?/p>

所以我們總結(jié)relative定位：
1.相對(duì)于元素原來(lái)的位置進(jìn)行相應(yīng)的位移；
2.其他元素的位置并不受影響，也就是說(shuō)被定位的元素原來(lái)的位置還存在占位，并沒(méi)有釋放。

三、absolute定位

首先我們還是來(lái)看一下官方的解釋?zhuān)荷山^對(duì)定位的元素，相對(duì)于默認(rèn)定位以外的第一個(gè)父元素進(jìn)行定位。我們嘗試一下在child1中加入absolute定位：

.child1{
    background-color: green;
    height: 100px;
    width: 100px;
    position: absolute;
    top: 20px;
    left: 20px;
}

我們看到效果如下：

我們觀察到，綠色塊代表的child1是相對(duì)于瀏覽器視口進(jìn)行了位移，而且它原來(lái)所占的位置被釋放掉，被紫色塊代表的child2給占領(lǐng)了。這里我們?nèi)菀椎玫絘bsolute和relative最重要的一個(gè)區(qū)別：relative定位不釋放原來(lái)所占的位置，absolute定位釋放原來(lái)所占的位置。還有個(gè)懸而未決的地方，就是absolute定位到底相對(duì)于誰(shuí)進(jìn)行位移的，在我們剛剛的試驗(yàn)中，“貌似”是相對(duì)于瀏覽器視口進(jìn)行偏移的，但是事實(shí)真的如此嗎？我們來(lái)研究一下官方的那句定義“相對(duì)于默認(rèn)定位以外的第一個(gè)父元素進(jìn)行定位”。在我們剛剛的試驗(yàn)中，parent、container、body都是chidl1的父元素，但是parent和container都是默認(rèn)定位，所以“默認(rèn)定位以外的第一個(gè)父元素”就是body元素了。那現(xiàn)在我們給parent進(jìn)行relative定位（這里不需要設(shè)置LTRB偏移值，只是消除parent的默認(rèn)定位屬性），看到結(jié)果如下：

果然如和我們所料，這個(gè)時(shí)候“默認(rèn)定位以外的第一個(gè)父元素”就是parent了，所以這次child1是相對(duì)于黃色塊代表的div進(jìn)行偏移的，而由于它釋放了原來(lái)所占的位置，紫色塊代表的div2就占領(lǐng)了它的位置。

總結(jié)一下absolute定位：

相對(duì)于誰(shuí)進(jìn)行定位有點(diǎn)復(fù)雜：就是找出定位元素父元素鏈上的所有父元素，由近到遠(yuǎn)哪個(gè)元素不是默認(rèn)定位（即static定位）的，那么就相對(duì)于它進(jìn)行定位。

定位元素會(huì)釋放原來(lái)所占的位置，其他元素會(huì)補(bǔ)充進(jìn)來(lái)，好似float屬性讓其漂浮起來(lái)一樣。

當(dāng)父元素鏈上所有父元素都是默認(rèn)定位，那么absolute定位就是相對(duì)于body元素的，效果和fix定位差不多。

相信通過(guò)以上的代碼實(shí)現(xiàn)探究，大家已經(jīng)對(duì)absolute和relative定位有了更深刻的認(rèn)識(shí)，其實(shí)只要把握兩點(diǎn)：1.相對(duì)于誰(shuí)定位 2.是否釋放原來(lái)的位置（比較官方的說(shuō)法是“文檔流位置”）就足以應(yīng)付大多數(shù)情況了，以后應(yīng)該不會(huì)再對(duì)它們傻傻分不清了吧：）

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/112816.html

相關(guān)文章

  • 探究：絕對(duì)定位沒(méi)有設(shè)置 top, right, bottom, left 的世界是怎樣的？

    摘要：一個(gè)元素如果設(shè)置了但沒(méi)有設(shè)置此元素的位置在哪在涉及到絕對(duì)定位元素的位置問(wèn)題時(shí)一個(gè)重要的概念是想要了解元素的位置還得找到此元素的才行如下是我進(jìn)行的一系列測(cè)試以及對(duì)測(cè)試結(jié)果的試探性解釋文中的英文術(shù)語(yǔ)都不翻譯方便直接查或者其他技術(shù)文檔請(qǐng)持有懷疑精 一個(gè)元素如果設(shè)置了position: absolute;, 但沒(méi)有設(shè)置top, right, bottom, left, 此元素的位置在哪? 在涉...

    kbyyd24 評(píng)論0 收藏0

  • 前端計(jì)劃——面試題總結(jié)-CSS篇

    摘要：定位使元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間?？梢灾缹傩杂幸韵聨讉€(gè)特點(diǎn)該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

    馬永翠 評(píng)論0 收藏0

  • WEB前端面試題匯總（CSS）

    摘要：默認(rèn)值，沒(méi)有定位，元素出現(xiàn)在正常的文檔流中。生成粘性定位的元素，容器的位置根據(jù)正常文檔流計(jì)算得出。和屬性的異同共同點(diǎn)對(duì)內(nèi)聯(lián)元素設(shè)置和屬性，可以讓元素脫離文檔流，并且可以設(shè)置其寬高。 position的值， relative和absolute分別是相對(duì)于誰(shuí)進(jìn)行定位的？ 、relative:相對(duì)定位，相對(duì)于自己本身在正常文檔流中的位置進(jìn)行定位。、absolute:生成絕對(duì)定位，相對(duì)于最近一...

    qpwoeiru96 評(píng)論0 收藏0

  • Web前端經(jīng)典面試試題（二）

    摘要：上次由于時(shí)間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題一棧和隊(duì)列的區(qū)別棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 上次由于時(shí)間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題 一. 棧和隊(duì)列的區(qū)別? 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。 棧只允許在表尾一端進(jìn)行插入和刪...

    rickchen 評(píng)論0 收藏0

  • Web前端經(jīng)典面試試題（二）

    摘要：上次由于時(shí)間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題一棧和隊(duì)列的區(qū)別棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 上次由于時(shí)間有限只分享了一部分的前端面試題，所以本篇繼續(xù)分享前端經(jīng)典面試試題 一. 棧和隊(duì)列的區(qū)別? 棧的插入和刪除操作都是在一端進(jìn)行的，而隊(duì)列的操作卻是在兩端進(jìn)行的。 隊(duì)列先進(jìn)先出，棧先進(jìn)后出。 棧只允許在表尾一端進(jìn)行插入和刪...

    venmos 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<