目錄
包裹性
高度欺騙
#如何決定定位點
和relative相爱相杀
首頁 web前端 前端問答 css中什麼是絕對定位

css中什麼是絕對定位

Nov 02, 2021 pm 04:42 PM
css 絕對定位

在css中,絕對定位是讓元素的位置與文件流程無關的定位方式。設定為絕對定位的元素框從文件流完全刪除,並相對於其包含區塊定位;預設情況下,絕對定位的位置是相對於瀏覽器而言,配合top、right、bottom、left進行定位。

css中什麼是絕對定位

本教學操作環境:windows7系統、CSS3&&HTML5版、Dell G3電腦。

在css中,絕對定位是讓元素的位置與文件流程無關的定位方式。

設定為絕對定位的元素框從文件流程完全刪除,並相對於其包含區塊定位,包含區塊可能是文件中的另一個元素或初始包含區塊。預設情況下,絕對定位的位置是相對於瀏覽器而言,會配合top、right、bottom、left進行定位。

元素原本在正常文件流程中所佔的空間會關閉,就好像該元素原來不存在一樣。元素定位後產生一個區塊級框,而不論原來它在正常流中產生何種類型的框。

下面我們來詳細了解絕對定位(absolute)。其實絕對定位absolute和浮動float有部分相似性;如果能理解浮動float,對理解絕對定位absolute會大有幫助。

先說absolute和float的相似處:包裹性高度欺騙

包裹性

##所謂一圖勝千言(唯一的差別是:下圖的p增加了absolute)

 css中什麼是絕對定位

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="css中什麼是絕對定位" >
</p>
<p style="border:4px solid red; position: absolute;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="css中什麼是絕對定位" >
</p>
登入後複製

一旦給元素加上absolute或float就相當於給元素加上了display:block;。什麼意思呢?例如內聯元素span預設寬度是自適應的,你給其加上width是不起作用的。要想width定寬,你需要將span設成display:block。但如果你給span加上absolute或float,那span的display屬性自動就變成block,就可以指定width了。因此如果看到CSS裡absolute/float和display:block同時出現,那display:block就是多餘的CSS程式碼。

高度欺騙

上例給圖片外層的p加上absolute,因此高度欺騙未能很好的體現出來,將absolute移到內部圖片上,效果就出來了:

 css中什麼是絕對定位

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="css中什麼是絕對定位" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製

如果你看過CSS浮動float詳解會發現效果是一樣的。但背後的原理其實是有區別的,並不完全相同。加點文字就看出來了:

css中什麼是絕對定位

<p   style="max-width:90%">
  <img  src="/static/imghw/default1.png"  data-src="img/25/1.jpg"  class="lazy"   / alt="css中什麼是絕對定位" >
</p>
<p style="border:4px solid red;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
  我是一个绝对定位的absolute元素
</p>
登入後複製

從圖中明顯看出文字被圖片遮蓋了,這點和float不同。 float是欺騙父元素,讓其父元素誤以為其高度塌陷了,但float元素本身仍處於文檔流中,文字會環繞著float元素,不會被遮蔽。

但absolute其實已經不能算是欺騙父元素了,而是出現了

層級關係。如果處於正常的文檔流中的父元素算是凡人的話,那absolute已經得道成仙,用現在的話說已經不在一個次元上。從父元素的視點看,設成absolute的圖片已經完全消失不見了,因此從最左邊開始顯示文字。而absolute的層級高,所以圖片遮住了文字。

記得我剛開始接觸CSS尚處於戰鬥力為5的渣渣時,知道了absolute可以出現層級的概念,就誤以為已經徹底懂了,現在想想真是圖樣圖森破(當然這不是件壞事,每當你覺得以前的自己渣像塊豆腐渣時,就代表你進步了。反過來總說想當年自己如何,那表示你還在吃老本)。

有了上面的基礎後,你還需要了解absolute以下特性

    如何決定定位點
  • #和relative相愛相殺
  • 和z-index的關係
  • 減少重繪和回流的開銷

#如何決定定位點

一旦absolute分層後,第一個出現的問題就是讓瀏覽器在何處顯示該元素。普通文件流程裡的元素,瀏覽器可以根據其父子兄弟元素的大小和位置,計算出該元素的位置。但分層後怎麼辦?基本想法如下:

第一種情況:使用者只給元素指定了absolute,未指定left/top/right/bottom。此時absolute元素的左上角定位點位置就是該元素正常文件流裡的位置。如上圖例中,圖片熊貓是父親元素的第一個孩子,因此左上角定位點就是父元素的content的左上角。

如果將圖片熊貓和下面的文字順序改一下,讓其成為父元素的第二個孩子,一圖勝千言:

 css中什麼是絕對定位#

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

结论重复一遍:未指定left/top/right/bottom的absolute元素,其在所处层级中的定位点就是正常文档流中该元素的定位点。

第二种情况:用户给absolute元素指定了left/right,top/bottom

先简单点,让absolute元素没有position:static以外的父元素。此时absolute所处的层是铺满全屏的,即铺满body。会根据用户指定位置的在body上进行定位。

只指定left时,元素的左上角定位点的left值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值:

css中什麼是絕對定位

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

只指定right时,元素的右上角定位点的right值会变成用户指定值。但top值仍旧是该元素在正常文档流中的top值:

css中什麼是絕對定位

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

只指定top时,元素的左上角定位点的top值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值:

css中什麼是絕對定位

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

只指定bottom时,元素的左下角定位点的bottom值会变成用户指定值。但left值仍旧是该元素在正常文档流中的left值:

css中什麼是絕對定位

<p   style="max-width:90%">
  我是一个绝对定位的absolute元素
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"    style="max-width:90%"  / alt="css中什麼是絕對定位" >
</p>
登入後複製
登入後複製
登入後複製
登入後複製
登入後複製

通过对left/top/right/bottom的组合设置,由于没有position:static以外的父元素,此时absolute元素可以去任意它想去的地方,天空才是它的极限。

和relative相爱相杀

通常我们对relative的认识是(好吧,我承认,这是我战5渣渣时的认识。如果你是弗利萨,可以鄙视这句话):relative主要用于限制absolute

上面已经说了,如果absolute元素没有position:static以外的父元素,那将相对body定位,天空才是它的极限。而一旦父元素被设为relative,那absolute子元素将相对于其父元素定位,就好像一只脚上被绑了绳子的鸟。

比如你要实现下图iOS里APP右上角的红色圈圈

css中什麼是絕對定位

通常的做法是将APP图片所处的p设成relative,然后红色圈圈设成absolute,再设top/right即可。这样无论用户怎么改变APP图片的位置,红色圈圈永远固定在右上角,例如:

css中什麼是絕對定位

.tipIcon {
  background-color: #f00;
  color: #fff;
  border-radius:50%;
  text-align: center;
  position: absolute;
  width: 20px;
  height: 20px;
  right:-10px;  //负值为自身体积的一半
  top:-10px;
}

<p style="display: inline-block;position:relative;">
  <img  src="/static/imghw/default1.png"  data-src="img/25/2.jpg"  class="lazy"   / alt="css中什麼是絕對定位" >
  <span class="tipIcon">6</span>
</p>
登入後複製

这样做效果是OK的,兼容性也OK。但CSS的世界里要实现一个效果可以有很多种方式,具体选用哪个方案是见仁见智的。我比较看重的标准:一个是简洁,另一个是尽量让每个属性干其本职工作。

用这两个标准看待上述实现方法,应该是有改进的空间的。首先外层p多了relative未能简洁到极致。其次relative的本职工作是让元素在相对其正常文档流位置进行偏移,但父层p并不需要任何位置偏移,之所以设成relative唯一的目的是限制absolute子元素的定位点。因此在我看来这并没有让relative干其本职工作。好比小姐的本职工作是服务业,顺便陪客户聊聊天,但纯聊天聊完一个钟,恐怕会被投诉。

(学习视频分享:css视频教程

以上是css中什麼是絕對定位的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

vue中怎麼用bootstrap vue中怎麼用bootstrap Apr 07, 2025 pm 11:33 PM

在 Vue.js 中使用 Bootstrap 分為五個步驟:安裝 Bootstrap。在 main.js 中導入 Bootstrap。直接在模板中使用 Bootstrap 組件。可選:自定義樣式。可選:使用插件。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架,需要按照以下步驟:1. 通過 CDN 引用 Bootstrap 文件;2. 下載文件並將其託管在自己的服務器上;3. 在 HTML 中包含 Bootstrap 文件;4. 根據需要編譯 Sass/Less;5. 導入定製文件(可選)。設置完成後,即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法:使用 標籤,可創建水平分割線。使用 CSS border 屬性,可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法:直接插入圖片,使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件,可以提供響應式圖片和更多樣式。設置圖片大小,使用 img-fluid 類可以使圖片自適應。設置邊框,使用 img-bordered 類。設置圓角,使用 img-rounded 類。設置陰影,使用 shadow 類。調整圖片大小和位置,使用 CSS 樣式。使用背景圖片,使用 background-image CSS 屬性。

bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕?引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小,可以使用尺寸類,具體包括:調整寬度:.col-、.w-、.mw-調整高度:.h-、.min-h-、.max-h-

See all articles