掌握CSS定位,才能讓「盒子」飛得更高更遠更穩

2020-12-16 進擊的網際網路大大

眾所周知,前端CSS中,盒模型、浮動、定位為必須掌握的三座大山。

今天就來聊聊定位的那些事。

定位是什麼?

先來看看哪些場景用到定位,如下圖所示,凡是有盒子壓住另一個盒子的地方都可定位,因為用浮動做不了,如果盒子浮動,會並排但不會出現有層級的觀感。所以想要有層級的觀感,就得用定位。

用到定位的場景

簡單來說,定位就是將盒模型中的盒子顯示在我們想要的位置。

定位的語法

定位由position屬性和邊偏移屬性組成。

position屬性語法為:{position:屬性值},常用值如下:

position屬性

邊偏移屬性語法為:{邊偏移:屬性值},常用值如下:

邊偏移屬性

定位模式和用法

1、 靜態定位static

靜態定位具備標準流特性,所有元素默認靜態定位,靜態定位不能通過設置邊偏移改變位置。

靜態定位的作用:取消定位。

2、 相對定位relative

相對定位在標準流中,採用相對定位的盒子仍然佔用原來的位置。每次移動位置,以自己的左上角為基點移動(相對於自己移動位置)

3、 絕對定位absolute

絕對定位不具備標準流特性,採用絕對定位的盒子在設置邊偏移後不佔位置。

絕對定位的盒子在父級沒有定位時,以瀏覽器為準對齊;當父級有定位,依據最近的已定位的父元素進行定位。

4、 固定定位fixed

固定定位不具備標準流特性,不佔位置,始終以瀏覽器為標準顯示位置,不管瀏覽器滾動和窗口大小,fixed顯示固定。

定位總結

終極用法口訣:子絕父相,或子絕父絕。

就是說,在實際開發過程中,子盒子採用絕對定位,那麼父盒子必定採用相對定位或絕對定位。

如果要實現絕對定位的盒子水平或垂直居中需要採用一定的算法。因為加定位有偏移和浮動的盒子通過設置margin值實現水平居中失效。那麼採用以下方法:

先設置左邊偏移50%,50%表示父盒子的一半,即left:50%。再設置自己盒子外邊距為盒子寬度負的一半,即margin-left:-width/2。

定位用法

定位模式轉換

當盒子加fixed和absolute定位,元素轉換為行內塊元素。

如果盒子固定定位,當盒子內容為空時,盒子的高度會為0,為避免這種情況可設置盒子的寬高,再設置下面的盒子的margin值,可實現top通欄固定不動。如下圖的首頁展示固定top通欄。

網頁通欄top固定

層級z-index

當定位元素重疊,可通過z-index設置層疊次序。

層級z-index的場景

層級z-index只針對定位的元素,標準流和浮動不具備該屬性。

層級z-index的用法:z-index:2;後面沒有單位。

採用相對定位比標準流高一層級,浮在上面。盒子已經用相對定位,但是滑鼠放上去還想用相對定位,就可用z-index。取值相同時,根據書寫順序,後來居上。默認為0,值越大層級越高。(部分圖片來源網絡截圖,若侵權,聯繫刪除)

相關焦點

  • G-U速遞:周利群教授-插上科研的翅膀才能飛得更高飛得更遠
    周利群教授:「臨床能力只是醫生一個單一的翅膀,為自己插上科研的另一隻翅膀,才能讓自己的羽翼更加豐滿,才能飛得更高,飛得更遠……」在當今學科領域的發展中,以外科醫生為例,如果僅僅只是做手術,那麼只能算得上是一個「開刀匠」,不注重科研很難走得很遠。
  • 弄懂css盒子模型從這幾點入手,新手建議收藏!
    怎麼理解盒子模型?盒子模型是樣式表(css)控制頁面的很重要的概念。如果理解了盒子模型和其中每個元素的用法,才能熟練使用css的定位方法和技巧。所有的頁面的元素都可以看成是一個盒子,佔據一定的頁面空間。佔據的空間要比實際使用的空間要大得多。
  • CSS面試須知,哪些需要掌握得CSS技巧
    1 介紹一下標準的CSS的盒子模型?與低版本IE的盒子模型有什麼不同的?用來控制元素的盒子模型的解析模式,默認為content-boxcontext-box:W3C的標準盒子模型,設置元素的 height/width 屬性指的是content部分的高/寬border-box:IE傳統盒子模型。
  • 推舉中國的火箭飛得更高更遠
    只希望它表現優秀,推舉中國的火箭飛得更高更遠。」9月24日,談到液氧煤油發動機,航天科技集團六院液氧煤油發動機領域總設計師劉站國動情地說。2016年6月25日20時,我國新一代中型運載火箭長徵七號首飛成功。這是高壓補燃液氧煤油發動機,在中型運載火箭首次成功應用。該發動機技術指標達到國際先進水平,獲得國家科技進步一等獎,成為中國航天進入太空的新動力。
  • HTML+CSS:掌握css的繼承以及代碼的優先級問題
    上邊文章我們說了使用css的三種不同的選擇器,本篇文章我們主要介紹css的繼承規則以及css代碼的權重優先級問題。(1)css的繼承規則CSS的某些樣式代碼是具有繼承性的,那麼究竟什麼是繼承呢?關於盒子、定位、布局的屬性,都不能繼承。(2)css代碼的權重優先級css就像工程師一樣是很嚴謹的,有的時候我們為同一個元素設置了不同的CSS樣式代碼,那么元素會啟用哪一個CSS樣式呢?
  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    本篇文章我們主要給大家說一下css的定位。css的定位是我們以後網頁製作中比較常用的屬性,也是很重要的知識點。了解各個定位的作用以及層級關係對以後的頁面布局至關重要。css定位主要有四種,靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式,不能使用top,bottom,left,right和z-index屬性,其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • CSS的盒子模型和浮動,都在這了
    點關注,不迷路,每天分享大量前端知識css中的盒子模型 css處理網頁時,他認為每個元素都包含在一個不可見的矩形盒子 盒子是由 內容區,內邊距(padding),邊框,外邊距(margin)組成在瀏覽器中,其默認樣式中存在一些body等元素存在的默認樣式,比如一些外邊距
  • 江蘇組團式教育援藏:讓雪域雛鷹飛得更高更遠
    拉薩江蘇實驗中學是江蘇省組團式教育援藏工作結出的碩果之一,自組團式教育援藏以來,江蘇省結合西藏拉薩市教育改革發展的迫切需求,充分發揮江蘇教育資源綜合優勢,打造「讓雪域雛鷹飛得更高更遠」的組團式教育援藏品牌。截至目前,江蘇省對口援藏受援學校8所,實現了從學前教育到高等教育完整體系、從普通教育到職業教育完整類型的全覆蓋。
  • 每天反省一下你自己,讓自己的人生之路走得更穩、更好,也更遠
    他們總是尋找自己的不足,力求改進這些不足;他們總是能夠虛心聽取別人的意見,從別人的建議中汲取營養,使自己變得更加完善;他們不會害怕自我批判和自我否認,因為他們知道自我否認的目的是為了使自己達到一個更高的層次當然自省不一定全部是反面的,有時候正面的東西也需要加以總結現固。鄧小平同志指出:「過去的成功是我們們的財富,過去的錯誤也是我們的財富。」
  • 【專欄試讀】(07)CSS 基本視覺格式化:① 「塊盒子」格式化 | CSS
    本篇我們將闡述最基本的理論知識,將「盒子」的方方面面一步步帶到你的跟前。1 什麼是「盒子」「盒子 box」由 CSS 引擎根據文檔中的內容所創建,主要用於文檔元素的格式化、定位和布局等。盒子與元素並不是一一對應的,有時多個元素會合併生成一個盒子,有時一個元素會生成多個盒子(如匿名盒子)。
  • 一篇文章帶你了解css z-index(重疊順序)
    二、z-index使用條件z-index在使用絕對定位 position:absolute屬性條件下使用才能使用。通常CSS讓不同的對象盒子以不同順序重疊排列,CSS就是要z-index樣式屬性。z-index重疊順序案例為了方便觀察,設置3個DIV盒子,分別設置不同css背景顏色,設置相同CSS高度、CSS寬度。分別設置背景顏色)為黑色、紅色、藍色。CSS width為300px,css height為100px。
  • CSS學習筆記總結
    CSS(層疊樣式)由網景公司在1996年發布,取代了html 專門用來渲染頁面的樣式,文件以.css結尾 嚴重區分大小寫 毫無容錯性css的第一個宗旨是將頁面的結構和樣式解耦引入css的三種方式內嵌式以上元素都是塊元素 塊元素自帶換行 一行只能書寫一個 設置對齊方式有效 設置盒子模型有效2)內聯元素(inline)eg:label span a img*內元素沒有換行 一行可以存在多個 從左向右排列 設置對齊方式和盒子模型等參數一律無效
  • 上高中讓孩子定一個明確的目標孩子才能走得更穩更遠
    高中的孩子有了自己的想法和主見,讓孩子自己思考定一個適合自己又能實現的目標,孩子才會有努力的方向和動力,才能走得更遠。這個目標至少應該含兩個方面學習的短期計劃,人生的長遠規劃。寥寥數語,她把自己專業的前景,自己的規劃,對自己的認知分析得頭頭是道,這樣的洞察力和認知力、執行力在一個高一十五歲的女孩身上就具備,怎麼可能不優秀。不出所料高考輕輕鬆鬆進了她想去的985。在制定目標和規劃時一定要結合自己的實際,定一個適合自己,自己努力拼搏後能夠著的目標,太低了,輕輕一墊腳尖就能夠著,缺少了激勵價值。
  • 《精通CSS》第5章 漂亮的盒子
    對於整個盒子,我們可以通過一系列的手段來美化,如指定盒子的背景、邊框以及盒子的陰影。本文將從這三個方面來介紹如何美化一個盒子。本章文中示例代碼託管在CodeSandbox[1],請按需取用一、設置盒子的背景背景相關的屬性有很多,接下來歪馬一個一個給大家展示。
  • div+css定位技術之相對定位和絕對定位
    1.relative:相對定位說明:定位元素相對原來的自己進行定位的方式,脫離普通的文檔流,依然佔用原來空間<!Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>Document</title><styletype="text/css
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義(表1)。relative表示相對定位,在文檔流中仍然佔有空間,其參考對象是離該元素最近的父元素。圖1表示父元素的position值變化時,子元素(position=relative)與父元素的相對位置,由圖可以看出其相對位置不隨父元素的position值變化而變化。
  • 帶著夢想,飛得更高更遠——習近平總書記牽掛的民生事之「學有所教...
    新華社北京8月7日電 題:帶著夢想,飛得更高更遠——習近平總書記牽掛的民生事之「學有所教」篇   新華社記者  【引言】     循著習近平總書記的足跡,新華社記者在回訪中看到一個個令人振奮的畫面——學有所教的逐步實現,正在為中華大地每一個孩子插上翅膀,讓他們帶著夢想飛得更高更遠。
  • CSS網頁的布局設置
    1.網頁的布局2.內容垂直居中盒子中只有一行文本 ,讓內容在盒子中垂直居中,設置行高的高度(line-height)和內容的高度(height)一致3.行內元素和塊元素行內元素:一行內可以有多個標籤,寬度是由內容決定例如 img a span ins b 默認的css樣式display:inline;塊元素:自己獨佔一行,縱向排列 ul,li,ol,dt,dd,div 默認的css樣式display:block;塊轉化行內元素: display
  • 前端基礎篇之CSS世界
    我想你每天寫css代碼有時候也會覺得很痛苦:這個布局的css怎麼這麼難實現!我也經常會有這種感覺,一個看似簡單的布局總是要琢磨半天才能實現,偶爾還會出現一些怪異的超出理解的現象。這是因為我們對css只是大概知道個形,並沒有看透css的本質。在同事的推薦下我閱讀了張鑫旭老師的《css世界》,才發現css跟想像中的不太一樣。
  • 鳳凰姑娘:全網營銷讓一碗魚粉在網上飛得更遠
    鳳凰姑娘:全網營銷讓一碗魚粉在網上飛得更遠 2015-12-24 23:51 來源:星辰在線 「湖南十大牛商評選」系列報導之十二:(嚴巡迴在一直思考,如何藉助網際網路的翅膀讓鳳凰姑娘飛得更高,飛得更遠。)