相對定位、絕對定位、固定定位(position)

2021-01-07 現在學前端不晚

浮動時讓元素浮起來，那麼定位就是把元素定在某個位置上，不讓它動。

定位的元素屬性

1.偏移

top：頂部偏移量，定義元素先對於父元素上邊線的距離 bottom：底部偏移量，定義元素先對於父元素下邊線的距離 left：左部偏移量，定義元素先對於父元素左邊線的距離 right：右部偏移量，定義元素先對於父元素右邊線的距離2.定位模式

position屬性的常用值

static：自動定位（默認定位方式）唯一的用處就是用來取消定位。 relative：相對定位，相對元素本身的位置進行定位，相對定位不脫離自己原來的文檔流，移動的位置是以自己左上角為基點來移動的

相對定位css
相對定位效果

absolute：絕對定位，相對於它上一個已經定位的祖先元素進行定位，如果所有祖先元素都沒有定位就以當前屏幕進行定位。如果子元素想在父元素上定位而父元素不想挪動位置，那麼就為父元素設置相對定位且父元素的top和left為0。（自絕父相）

絕對定位css
絕對定位效果

fixd：固定定位，相對於瀏覽器窗口進行定位，脫離原來的文檔流

固定定位css
固定定位效果

註：加了絕對定位和固定定位之後元素模式也會跟著變化，轉為行內塊。（行內塊的寬度和高度跟內容有關）

z-index

想要調整層疊元素的堆疊順序時可以使用z-index屬性來設置層疊順序

z-index的默認值是0，取值越大元素的層疊順序約靠上如果同樣的值則根據文檔順序，後來者居上值之能是數值，不能加單位

沒設置index之前
設置index之後
設置方法

相關焦點

  • HTML+CSS:css定位詳解之相對定位、絕對定位和固定定位
    css定位主要有四種，靜態定位、相對定位、絕對定位和固定定位。其中靜態定位這個是元素的默認定位方式，不能使用top，bottom，left，right和z-index屬性，其它三種定位可以使用以上幾個屬性。我們這裡主要介紹後邊的這三個定位。
  • div+css定位技術之相對定位和絕對定位
    1.relative：相對定位說明：定位元素相對原來的自己進行定位的方式，脫離普通的文檔流，依然佔用原來空間<!title>Document</title><styletype="text/css">div{width:100px;height:100px;border:1px solid red;position
  • CSS+DIV相對定位和絕對定位的區別和聯繫
    選取其最近的父級定位元素，當父級position為static時，absolute元素將以body坐標原點進行定位，可以通過z-index進行層次分級。◆fixed固定定位，這裡他所固定的對像是可視窗口而並非是body或是父級元素。可通過z-index進行層次分級。
  • CSS之定位一(position屬性)
    本文我們討論涉及定位的position屬性。首先我們來看一下position對應的值及其含義（表1）。表1：position對應值其中static是默認值，當元素未定義position或定義position值為static時，該元素內定義的top, bottom, left, right 和 z-index無效。
  • 前端自學之路之CSS之position定位
    position標識定位，就類似於百度地圖上一系列定位點，position就是給html元素定位的。position有四種值：/*** 默認未設置的值，沒有任何影響*/position: static;/*** 相對定位，以默認位置為參照起始點，進行偏移定位*/position: relative;/*** 絕對定位，
  • 剖析CSS relative相對定位用法
    剖析CSS relative相對定位用法 上節介紹了CSS絕對定位的概念，這裡和大家分享一下CSS relative相對定位的用法，設置為相對定位的元素框會偏移某個距離。
  • 三菱FX3U定位控制及伺服應用技術之相對與絕對定位控制指令的應用
    FUX3U相對與絕對定位控制指令要點：相對定位指令DRVI和絕對定位指令區別1、相對定位指令DRVI：以當前工作檯的停止位置為起點，指定移動方向和移動量2、相對定位指令：以原點基準指定位置進行定位，與工作檯的當前停止位置沒有關係，與起點位置無關
  • UWB定位技術原理圖解
    基站R1、R2、R3在安裝部署時位置固定且坐標已知，所求定位標籤的坐標為Ro（xo、yo）。設定d1、d2、d3分別為3個定位基站與定位標籤Ro之間通過信號的傳播時間計算的相對距離，每個基站以相對距離為半徑畫一個圓形軌跡。
  • 輕輕鬆鬆學CSS:position
    浮動廣告只相對於瀏覽器窗口定位，和position：fixed配合的偏移屬性top:100px,right:80px都是相對於瀏覽器窗口來說的，效果圖如下：fixed叫「固定定位」,讀者運行代碼後應該能體會出，懸浮廣告總是相對瀏覽器窗口保持top=100px,right=80px不動，滾動條怎麼滾動都改變不了他的位置。
  • 算無遺策——markerless肺結節定位法
    肺結節是早期肺癌的常見表現，臨床診療中最常見的定位方法便是marker定位法，無論是術前CT引導下定位還是術中電磁導航、螢光現像定位，越來越多位置刁鑽的結節不斷給各種定位方法帶來挑戰。Brevity is beauty,那麼能不能僅通過影像學和立體幾何模擬來進行markerless定位呢？
  • GPS定位功能的簡單介紹
    它是GPS技術應用中的一項常用功能，中心端採用固定IP接入，用來接收和處理GPS終端通過行動網路提交上來的各種數據，如終端當前位置信息，終端的各種報警信息等，同時處理客戶端提交上來的各種查詢請求。載波相位GPS定位，載波相位定位所採用的觀測值為GPS的載波相位觀測值，即L1、L2或它們的某種線性組合。載波相位定位的優點是觀測值的精度高，一般優於2個毫米;其缺點是數據處理過程複雜，存在整周模糊度的問題。二、根據定位的模式絕對GPS定位，絕對定位又稱為單點定位，這是一種採用一臺接收機進行定位的模式，它所確定的是接收機天線的絕對坐標。
  • 導航定位方法的分類
    採用民用碼偽距觀測值定位精度在１０米左右，採用軍用碼偽距觀測值定位精度在３米左右，但是軍用碼定位需要授權使用軍用接收機才可以定位。偽距定位的優點是數據處理簡單，對定位條件的要求低，不存在整周模糊度解算，可以非常容易地實現實時定位，其缺點是觀測值精度低。載波相位定位是指利用載波相位觀測值或不同頻率的載波相位觀測值進行線性組合，進而解算位置。
  • GPS相對定位在重力衛星KBR測距中的應用
    文章介紹了重力衛星測量系統的組成，研究了GPS相對定位與定時在重力衛星K波段測距系統(KBR)微米級測距中的作用，給出了利用雙頻 GPS相對定位與定時結果修正KBR測距的方案，並通過仿真實際應用對該方案進行驗證。
  • 掃地機器人室內定位技術解析
    定位是包括掃地機器人在內的移動機器人自主導航中最基本的環節，也是完成任務必須解決的問題。說到定位，大家首先想到的可能是GPS定位、基站定位等常用的室外定位。 　　與之不同，掃地機器人的定位都是室內定位，其要求定位精度高（最少在亞米級），實時性好，GPS、基站定位等方法無法滿足。掃地機器人定位總體上可以分為相對定位和絕對定位，下面我們分別來看。
  • 全球定位系統定位原理是什麼 全球定位系統應用領域介紹【詳解...
    但由於都卜勒衛星軌道高度低、信號載波頻率低，軌道精度難以提高，使得定位精度較低，以滿足大地測量或工程測量的要求，更不可能用於天文地球動力學研究。為了提高衛星定位的精度，美國從1973 年開始籌建全球定位系統GPS(Global Positioning System)。
  • CSS位置:相對於位置絕對
    定位有幾種類型：靜態，相對，絕對，固定，粘性，初始和繼承。首先，讓我們來解釋所有這些類型的含義。靜態 - 這是默認值，所有元素按照它們在文檔中出現的順序排列。相對 - 元素相對於其正常位置放置。絕對 - 該元素絕對定位到其第一個定位的父級。固定 - 元素的位置與瀏覽器窗口有關。粘滯 - 元素根據用戶的滾動位置進行定位。
  • 5G定位技術
    TOA定位法的缺點在於，若基站與手機之間時間不同步，雙方都不知道信號發送的絕對時間，會造成計算和定位誤差。 而TDOA利用相對時間（時間差）來彌補了這一缺點，即通過測量手機與附近兩個基站的信號到達時間差，來計算手機到基站的距離差。
  • 如何使用伺服電機實現定位功能?
    這裡我們簡述下三菱PLC定位指令，大致分為三種，原點回歸指令DSZR、ZRN，定位指令PLSY、PLSR、DRVI、DRVA,可變速運行PLSV。其中PLSY、PLSR是脈衝輸出指令，它的定位功能是相對較弱的或者是最基礎的定位指令，後面的定位指令都是在它的基礎上發展而來的。我們一般採用DRVI、DRVA指令實現定位，DRVI是相對定位指令，DRVA是決定定位指令。
  • LBS定位功能和實現定位物聯網卡設備
    LBS定位 PK GPS定位 除了LBS定位外，大家最熟知的定位方式應該是GPS定位。作為一種傳統的定位方法，GPS定位是目前應用最廣泛、定位精度最高的定位技術。 但GPS定位： 定位成本高，需要終端配備GPS硬體 定位盲區多，陰天、室內無法準確定位 耗電多，需要額外硬體自然耗電多 與大家熟悉的GPS定位對比，LBS定位有如下特點：
  • 利用GPS衛星定位技術對疏浚工程船舶進行施工定位
    2、GPS的工作原理　　差分GPS之所以能獲得高精度的定位數據，是因為在已知位置設一基準（固定）站，通過GPS接收衛星信號監測GPS的系統誤差，並按規定的時間間隔把誤差校正量等數據通過無線數據鏈播發出去，移動站利用收到的信息，對GPS觀測值進行校正，以消除星曆誤差，星鍾誤差，大氣層延遲差等公共誤差。