css相對定位和絕對定位有什么區別

本篇文章給大家分享的是有關css相對定位和絕對定位有什么區別，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

  CSS定位，顧名思義，CSS position屬性定義了元素在網頁上的定位方式。

因此，有幾種類型的定位：static, relative, absolute, fixed, sticky, initial和inherit。首先，讓我們解釋所有這些類型的含義。

static（靜態） - 這是默認值，所有元素按順序顯示在文檔中。

relative（相對） - 元素相對于其正常位置定位。

absolute（絕對） - 元素絕對定位于其第一個定位的父元素。

fixed（固定） - 元素與瀏覽器窗口相關。

sticky（黏性）- 元素根據用戶的滾動位置定位。

現在我們已經解釋了基礎知識，我們將更多地討論兩個最常用的位置值 - relative（相對）和absolute（絕對）。

什么是相對定位？

當你設置相對于元素的位置時，不添加任何其他定位屬性（頂部，底部，右側，左側）將不會發生任何事情。當您添加除相對位置之外的其他位置時，例如left：20px，該元素將從其正常位置向右移動20px。在這里，您可以看到此元素與其自身相關。當元素移動時，布局上的其他元素都不會受到影響。

設置位置時應注意的事項 - 相對于元素限制了絕對定位的子元素的范圍。這意味著作為此元素的子元素的任何元素都可以絕對定位在此塊中。

在這個簡短的解釋之后，我們需要通過展示一個例子來支持它。

在此示例中，您將看到相對定位元素在其屬性更改時如何移動。第一元件移動到左側和頂部從其正常位置，而所述第二元件保持在相同的位置，因為沒有附加的定位的屬性被改變。

HTML：

<div id=”first_element”>First element</div>
<div id=”second_element”>Second element</div>

CSS：

#first_element {
  position: relative;
  left: 30px;
  top: 70px;
  width: 500px;
  background-color: #fafafa;
  border: solid 3px #ff7347;
  font-size: 24px;
  text-align: center;
  }
  #second_element {
   position: relative;
   width: 500px;
   background-color: #fafafa;
   border: solid 3px #ff7347;
   font-size: 24px;
   text-align: center;
   }

什么是絕對定位？

絕對定位允許您將元素精確放置在您想要的位置。

絕對定位完成相對于所述第一相對（或絕對）位于父元素。在沒有定位父元素的情況下，位置設置為絕對的元素將直接與HTML元素（頁面本身）相關聯。

使用絕對定位時要記住的一件重要事情是確保它不會被過度使用，否則會導致維護困難。

接下來的另一件事是展示絕對定位的一個例子。

在示例中，父元素的位置設置為relative?，F在，當您將子元素的位置設置為絕對時，將相對于父元素執行任何其他定位。子元素相對于父元素的頂部移動100px，父元素的右移移40px。

HTML：

<div id=”parent”>
  <div id=”child”></div>
</div>

CSS：

#parent {
  position: relative;
  width: 500px; 
  height: 400px;
  background-color: #fafafa;
  border: solid 3px #9e70ba;
  font-size: 24px;
  text-align: center;
  }
  #child {
  position: absolute;
  right: 40px;
  top: 100px;
  width: 200px;
  height: 200px;
  background-color: #fafafa;
  border: solid 3px #78e382;
  font-size: 24px;
  text-align: center;
  }

以上就是css相對定位和絕對定位有什么區別，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。