CSS相對(duì)定位

ztyzz 發(fā)布于2019-08-30 12:50 / 1249人閱讀

摘要：下面我們來(lái)看一段代碼這段代碼設(shè)置了類名為的元素相對(duì)定位。使用了相對(duì)定位的元素，仍然會(huì)在標(biāo)準(zhǔn)流中占據(jù)原來(lái)的位置，它對(duì)父元素和兄弟元素沒(méi)有影響。相對(duì)定位的使用場(chǎng)景往往是作為絕對(duì)定位元素的參照物。

1.相對(duì)定位

相對(duì)定位：從這個(gè)名字我們就可以知道，這是一種相對(duì)某個(gè)元素定位的一個(gè)方法。
那么，我們到底是相對(duì)哪個(gè)元素來(lái)定位的呢？
其實(shí)這個(gè)元素不是其他元素，而是這個(gè)元素本身，即應(yīng)用相對(duì)定位方法的這個(gè)元素。

下面我們來(lái)看一段代碼：

.bottom{position:relative;
      top:20px;
      left:50px;}

這段代碼設(shè)置了類名為bottom的元素相對(duì)定位。下面來(lái)看一下效果。

未應(yīng)用定位前：

相對(duì)定位后：

從上圖中我們可以看出應(yīng)用了相對(duì)定位的元素，相對(duì)于其本身的位置向下移動(dòng)了20px(top:20px)，向左移動(dòng)了50px（left:50px）。另外我們可以看到其后面的元素并沒(méi)有占據(jù)它的位置，我們可以知道，它仍在標(biāo)準(zhǔn)流中占據(jù)原來(lái)的位置。
現(xiàn)在讓我們總結(jié)一下相對(duì)定位的幾個(gè)特點(diǎn)：
1.使用了相對(duì)定位元素的元素，其參照物是其本身，其偏移量由TRBL(top，right,bottom,left)的值確定。
2.使用了相對(duì)定位的元素，仍然會(huì)在標(biāo)準(zhǔn)流中占據(jù)原來(lái)的位置，它對(duì)父元素和兄弟元素沒(méi)有影響。
3.相對(duì)定位的使用場(chǎng)景往往是作為絕對(duì)定位元素的參照物。

云服務(wù)器 GPU云服務(wù)器相對(duì)定位-絕對(duì)定位相對(duì)定位相對(duì)定位自適應(yīng) 相對(duì)窗口

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

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

相關(guān)文章

CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。這說(shuō)明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素在定位。事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了和位移屬性值，實(shí)際上優(yōu)先級(jí)高于。這是《CSS設(shè)計(jì)指南》的讀書(shū)筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評(píng)論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態(tài)定位下，每個(gè)元素在處在常規(guī)文檔流中，它們都是塊級(jí)元素，所以會(huì)在頁(yè)面中自上而下地堆疊。這說(shuō)明絕對(duì)定位的元素脫離了常規(guī)文檔流，它現(xiàn)在是相對(duì)于頂級(jí)元素在定位。事實(shí)上，一個(gè)相對(duì)定位元素同時(shí)設(shè)置了和位移屬性值，實(shí)際上優(yōu)先級(jí)高于。這是《CSS設(shè)計(jì)指南》的讀書(shū)筆記，用于加深學(xué)習(xí)效果。前一篇CSS入門指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評(píng)論0 收藏0
CSS詳細(xì)解讀定位

摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對(duì)定位，固定定位。我的回答是相對(duì)自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問(wèn)題，主要研究它的定位問(wèn)題。一前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來(lái)的一些特性，熟練使用CSS布局。二正文 1.文檔流布局的概念將窗體自上而下分成一行行，并在每行中按從左至右的...

1treeS 2019-08-30 14:01 評(píng)論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...

xiguadada 2019-08-29 15:23 評(píng)論0 收藏0
[CSS]CSS Position 詳解

摘要：三生成固定定位的元素，相對(duì)于瀏覽器窗口定位，即瀏覽器窗口滾動(dòng)也不會(huì)影響元素位置，元素的位置與文檔流無(wú)關(guān)，因此不占據(jù)空間，可能會(huì)和其他元素發(fā)生重疊。，元素脫離文檔流，相對(duì)于以外的第一個(gè)父元素定位。一. CSS position 屬性介紹 CSS中position屬性指定一個(gè)元素（靜態(tài)的，相對(duì)的，絕對(duì)或固定）的定位方法的類型。有static，relative，absolute和fixed...

alexnevsky 2019-08-02 10:26 評(píng)論0 收藏0
position 的屬性值

摘要：注意當(dāng)該固定元素的祖先元素的屬性非時(shí)，容器由瀏覽器窗口改為該祖先元素粘性定位，相當(dāng)于相對(duì)定位和固定定位的混合。粘性定位根據(jù)一個(gè)閾值決定，在大于等于閾值時(shí)采用相對(duì)定位，小于閾值后則為固定定位。理論上來(lái)說(shuō)，全部 position 的取值有8個(gè) 包括：position：static | relative | absolute | fixed | sticky | initial | inherit...

番茄西紅柿 2019-04-23 13:30 評(píng)論0 收藏0