本篇文章給大家分享的是有關(guān)css相對(duì)定位和絕對(duì)定位有什么區(qū)別，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說(shuō)，跟著小編一起來(lái)看看吧。

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、淶水網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5開發(fā)、電子商務(wù)商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)營(yíng)銷網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為淶水等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

CSS定位，顧名思義，CSS position屬性定義了元素在網(wǎng)頁(yè)上的定位方式。

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

static（靜態(tài)） - 這是默認(rèn)值，所有元素按順序顯示在文檔中。

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

absolute（絕對(duì)） - 元素絕對(duì)定位于其第一個(gè)定位的父元素。

fixed（固定） - 元素與瀏覽器窗口相關(guān)。

sticky（黏性）- 元素根據(jù)用戶的滾動(dòng)位置定位。

現(xiàn)在我們已經(jīng)解釋了基礎(chǔ)知識(shí)，我們將更多地討論兩個(gè)最常用的位置值 -relative（相對(duì)）和absolute（絕對(duì)）。

什么是相對(duì)定位？

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

設(shè)置位置時(shí)應(yīng)注意的事項(xiàng) - 相對(duì)于元素限制了絕對(duì)定位的子元素的范圍。這意味著作為此元素的子元素的任何元素都可以絕對(duì)定位在此塊中。

在這個(gè)簡(jiǎn)短的解釋之后，我們需要通過(guò)展示一個(gè)例子來(lái)支持它。

在此示例中，您將看到相對(duì)定位元素在其屬性更改時(shí)如何移動(dòng)。第一元件移動(dòng)到左側(cè)和頂部從其正常位置，而所述第二元件保持在相同的位置，因?yàn)闆]有附加的定位的屬性被改變。

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;
   }

什么是絕對(duì)定位？

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

絕對(duì)定位完成相對(duì)于所述第一相對(duì)（或絕對(duì)）位于父元素。在沒有定位父元素的情況下，位置設(shè)置為絕對(duì)的元素將直接與HTML元素（頁(yè)面本身）相關(guān)聯(lián)。

使用絕對(duì)定位時(shí)要記住的一件重要事情是確保它不會(huì)被過(guò)度使用，否則會(huì)導(dǎo)致維護(hù)困難。

接下來(lái)的另一件事是展示絕對(duì)定位的一個(gè)例子。

在示例中，父元素的位置設(shè)置為relative?，F(xiàn)在，當(dāng)您將子元素的位置設(shè)置為絕對(duì)時(shí)，將相對(duì)于父元素執(zhí)行任何其他定位。子元素相對(duì)于父元素的頂部移動(dòng)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相對(duì)定位和絕對(duì)定位有什么區(qū)別，小編相信有部分知識(shí)點(diǎn)可能是我們?nèi)粘９ぷ鲿?huì)見到或用到的。希望你能通過(guò)這篇文章學(xué)到更多知識(shí)。更多詳情敬請(qǐng)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)頁(yè)題目：css相對(duì)定位和絕對(duì)定位有什么區(qū)別-創(chuàng)新互聯(lián)
URL地址：http://jinyejixie.com/article8/ccsgip.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供面包屑導(dǎo)航、建站公司、Google、搜索引擎優(yōu)化、網(wǎng)站策劃、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)