position 的屬性值

来源:https://www.cnblogs.com/chayin/archive/2018/07/28/9380363.html
-Advertisement-
Play Games

理論上來說,全部 position 的取值有8個 包括:position:static | relative | absolute | fixed | sticky | initial | inherit | unset 其中最常用的是 static 、relative、absolute、fixed ...


理論上來說,全部 position 的取值有8個

包括:position:static | relative | absolute | fixed | sticky |  initial | inherit | unset

其中最常用的是 static 、relative、absolute、fixed 和 sticky

initial、inherit、unset 是css的關鍵字,任何css屬性的取值都可以設置這幾個值

 

position: static

預設值,在正常流中,對設置的 top 、left、right、bottom、z-index 一應忽略

 

position: relative

相對定位,相對於自己原來的位置偏移,(例:top: 10px; // 移動後元素頂部位於原位置頂部下10px;)

脫離文檔流,但在文檔流中保留原位置的空間(預留空間),

也就是說,元素原來位置會一直保留空白占位,相鄰兄弟元素會保持原來的位置,不會隨元素的移動而改變

註意:position: relative 對 table-*-group,table-row,table-column,table-cell,table-caption 元素無效。

慄子:

 

position: absolute

絕對定位,若祖先元素有設置 position: static 以外的屬性值,則相對該祖先元素絕對定位;否則,相對瀏覽器視口絕對定位

(在這裡說一個註意點,大多數人認為是相對 html 或 body 元素絕對定位,這是個誤區;當頁面是可滾動的,就可以看出是相對瀏覽器視窗絕對定位的了,而不是整個 html 內容;這裡我也懶得寫例子了,我就直接借鑒別人的吧:CSS進階——絕對定位元素的寬高是如何定義的

因此,一般做法是將該絕對定位元素的父元素加上 position: relative 屬性

脫離文檔流,不預留空間,該元素下的兄弟元素位置上移

慄子:

 

但 position: absolute 並不僅有以上這個用途;

在按其內容大小調整尺寸的元素(例如 height 和 width 被設定為 auto,又或者行內元素),若該元素被絕對定位 position: absulute ,則可以通過指定 top / bottom / left / right , 保留 height 未指定(即 auto), 來填充可用的垂直(水平)空間

什麼意思呢?淡定,來吃些慄子吧:

(除此之外,絕對定位的元素可以設置外邊距(margin),且不會與其他邊距合併,這個就不舉慄子了)

 

寫上面例子的時候還是有個疑問的:

既然絕對定位是脫離文檔流的,為什麼行內元素絕對定位的時候,在不設置 left 值時,它的原點是位於原位置的原點的呢?而不是位於父元素的原點呢?

(找了許久沒找著原因,這個留著以後慢慢解答吧)

 

position: fixed

固定定位,相對瀏覽器視窗固定定位,不隨滾動條滾動,實現的樣本就是日常網頁中的廣告彈窗

脫離文檔流,fixed 屬性會創建新的層疊上下文。

註意:當該固定元素的祖先元素的 transform 屬性非 none 時,容器由瀏覽器視窗改為該祖先元素

 

position: sticky

粘性定位,相當於相對定位和固定定位的混合。粘性定位根據一個閾值決定,在大於等於閾值時採用相對定位,小於閾值後則為固定定位。

這個閾值就是 top 、right 、bottom 、left 四種之一,必須設置了其中一個,才能讓粘性定位生效,否則一直表現為相對定位。

粘性定位除了以上條件之外,還有幾點需要註意,否則粘性定位會失效

1. 父元素的內容需滾動查看,且不能有 overflow: hidden 、 overflow: auto 屬性

2. 父元素的高度不能低於粘性定位元素的高度

3. sticky 是容器相關的,只會在它所處的容器(父元素)里生效。

sticky 慄子:demo

粘性定位的相容問題:

 1. 需寫下兩條css語句:

  position: sticky;  和 position: -webkit-sticky; /* Safari */

    2. Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 

 

position: initial

initial 關鍵字用於設置CSS屬性為它的預設值(在這裡也就是 position: static)

註: IE不支持該關鍵字

 

position: inherit

每個 CSS 屬性定義的概述都指出了這個屬性是預設繼承的 ("Inherited: Yes") 還是預設不繼承的 ("Inherited: no")。

關於 inherit 的妙用可以看看這裡:談談一些有趣的CSS題目(四)– 從倒影說起,談談 CSS 繼承 inherit

 

position: unset

unset 關鍵字是 initial 和inherit 的組合:

 1. 如果該屬性是預設繼承屬性,則該值等同於 inherit

 2. 如果該屬性是非繼承屬性,則該值等同於 initial

unset 的一些妙用可參考:有趣的CSS題目(15): 談談 CSS 關鍵字 initial、inherit 和 unset

 

至此,第一條博客總算是磕磕碰碰寫完了,雖然一直也有做筆記總結,但是寫出來還是覺得自己可能還有疏漏,寫博客不容易,堅持寫更是不容易了,由衷佩服那些讓我學到知識的博客大牛們!感恩~

本文參考:

1. 有趣的CSS題目(15): 談談 CSS 關鍵字 initial、inherit 和 unset

2. 談談一些有趣的CSS題目(四)-- 從倒影說起,談談 CSS 繼承 inherit

3. CSS進階——絕對定位元素的寬高是如何定義的

4. MDN position屬性


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2018年6月5日蘋果`WWDC`開發者大會之後,蘋果已經永久暫停`4006701855`中文開發者電話支持。 現在需要電話支持的話,只能被動要求,讓蘋果客服打電話給你。那怎麼獲得蘋果開發者咨詢服務呢? 請參照博文~ ...
  • 有時候後臺json數據返回的欄位含有“id”,也有可能是有時候為了減少代碼的冗餘,兩頁面之間只是數據模型個別屬性的區別,所以這時候最好是用到模型屬性的替換,用新的屬性替換返回的json數據的欄位。這裡主要總結了兩種使用方法,都是在項目已經集成別人封裝好的解析json數據的庫的基礎上。 以常見Yima ...
  • Instruments 使用Xcode自帶的 Instruments 檢測工具對App進行檢測,它可以檢測程式在運行時的記憶體泄漏。這是與靜態記憶體檢測的最大不同。 Open Instruments 打開Instruments的兩種方式: 第一種: 打開Xcode,點擊 Product -> profi ...
  • "RetrofitUtils" "GitHub地址,幫忙給個Star" 項目介紹 Retrofit+Okhttp輔助類的簡單封裝,vesion 1.0.X 實現了Get,Post Form、Post Json 三種形式的網路請求,後續版本會實現文件上傳下載and各類raw的請求方式。 功能 1. G ...
  • (1).場景一:外部滑動方向跟內部滑動方向不一致,比如外部左右滑動,內部上下滑動 ViewPager+Fragment配合使用,會有滑動衝突,但是ViewPager內部處理了這種滑動衝突 如果採用的不是ViewPager而是ScrollView就必須手動處理滑動事件 上下滑動時,需要上一級view把 ...
  • 雲之聲離線Jar包和so文件下載地址 下載地址 Android SoundPool語音播放類 ...
  • iOS學習——核心動畫 1、什麼是核心動畫 Core Animation(核心動畫)是一組功能強大、效果華麗的動畫API,無論在iOS系統或者在你開發的App中,都有大量應用。核心動畫所在的位置如下圖所示,可以看到,核心動畫位於UIKit的下一層,相比UIView動畫,它可以實現更複雜的動畫效果。 ...
  • public final class BitmapUtils { public static final String TAG = "BitmapUtil"; private static int sShotScreenWidth = 480; private static int sShotScr... ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...