CSS相對定位

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

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

1.相對定位

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

下面我們來看一段代碼：

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

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

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

相對定位后：

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

xiguadada 2019-08-29 15:23 評論0 收藏0
[CSS]CSS Position 詳解

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

alexnevsky 2019-08-02 10:26 評論0 收藏0
position 的屬性值

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

番茄西紅柿 2019-04-23 13:30 評論0 收藏0