CSS相對定位

ztyzz 發布于2019-08-30 12:50 / 1234人閱讀

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

1.相對定位

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

下面我們來看一段代碼：

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

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

未應用定位前：

相對定位后：

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

GPU云服務器云服務器相對定位-絕對定位相對定位相對定位自適應相對窗口

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115101.html

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

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

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

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

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

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

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

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

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

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

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

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

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