欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

css相對定位和絕對定位有什么區(qū)別-創(chuàng)新互聯(lián)

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

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

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

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

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

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

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

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

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

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

什么是相對定位?

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

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

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

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

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

css相對定位和絕對定位有什么區(qū)別

什么是絕對定位?

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

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

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

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

在示例中,父元素的位置設(shè)置為relative。現(xiàn)在,當(dāng)您將子元素的位置設(shè)置為絕對時,將相對于父元素執(zhí)行任何其他定位。子元素相對于父元素的頂部移動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相對定位和絕對定位有什么區(qū)別

以上就是css相對定位和絕對定位有什么區(qū)別,小編相信有部分知識點可能是我們?nèi)粘9ぷ鲿姷交蛴玫降摹OM隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道。

網(wǎng)頁題目:css相對定位和絕對定位有什么區(qū)別-創(chuàng)新互聯(lián)
URL地址:http://www.chinadenli.net/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)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司