国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

NickZhou / 2955人閱讀

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

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

一、默認(rèn)定位

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

和

是為了與窗口的頂部隔開距離便于觀察，neighboor和child2的div是為了對比位置，我們真正需要定位的焦點放在了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;
}

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

二、relative定位

首先我們來看一下官方的解釋：生成相對定位的元素，相對于其正常位置進行定位。我們來嘗試一下在child1中加入relative定位，并且輔以top和left位移值：

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

效果如下：

我們看到綠色方塊代表的child1和原來的位置相比top和left偏移了，但是其他的div都安分守己地待在原處，就好像child1的位移并沒有對它們造成任何影響。

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

三、absolute定位

首先我們還是來看一下官方的解釋：生成絕對定位的元素，相對于默認(rèn)定位以外的第一個父元素進行定位。我們嘗試一下在child1中加入absolute定位：

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

我們看到效果如下：

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

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

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

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

定位元素會釋放原來所占的位置，其他元素會補充進來，好似float屬性讓其漂浮起來一樣。

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

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

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/112816.html

相關(guān)文章

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

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

    kbyyd24 評論0 收藏0

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

    摘要：定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。可以知道屬性有以下幾個特點該元素并不脫離文檔流，仍然保留元素原本在文檔流中的位置。 前端面試之CSS篇 1、三種基本引入方式 外部樣式表 內(nèi)部樣式表 hr {color:sienna;} p {margin-left:20px;} body {background-image:url(images/bac...

    馬永翠 評論0 收藏0

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

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

    qpwoeiru96 評論0 收藏0

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

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

    rickchen 評論0 收藏0

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

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

    venmos 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<