相對定位(Relative positioning)

cyixlq 發布于2019-08-29 12:32 / 3416人閱讀

摘要：當一個盒根據常規流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。

當一個盒根據常規流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。

相對定位的盒保持它在常規流中的大小，包括換行和空格都會原樣保留

relative與absolute,fixed

relative與absolute的關系

在例1中,absolute元素的top/left:0的定位在瀏覽器窗口的左上角,而設置了relative父元素的absolute元素的top/left:0在relative元素的左上角
在例2中,relative元素與absolute元素同級的時候,z-index:2,后面的覆蓋前面的元素.當relative元素與absolute元素嵌套時,relative元素的z-index決定層疊順序,absolute元素z-index失效
在例3中,普通div元素設置的overflow:hidden對于子元素是absolute的元素無效,而設置relative的div元素設置overflow:hidden可以在子元素absolute中生效

也就是說relative可以:

限制left/top/right/bottom定位

限制z-index層級

限制在overflow下失效的問題

而對于fixed,relative只能限制z-index層級

relative與定位

relative與自身的定位

在例1中,設置left/top:0后,relative元素不會發生任何變化,而設置了left/top:100px后,元素相對于它本身向右和向下分別偏移了100px

在例2中,第二個圖片position: relative;left: -999em;,雖然它看不見了,但是它的位置保留了下來

在例3中,一個relative元素同時設置top/bottom:100px或者left/right:100px,起作用的是left:100px,top:100px

relative與z-index

relative與z-index關系

在例1中,設置了relative的元素層級要比普通元素高
在例2中,relative元素與absolute元素同級的時候,z-index:2,后面的覆蓋前面的元素.當relative元素與absolute元素嵌套時,relative元素的z-index決定層疊順序,absolute元素z-index失效
在例3中,z-index:auto比z-index:1優先級小,至于子元素的重疊,需要計算子元素的z-order決定

relative最小化影響原則

在可以多帶帶使用absolute解決問題的時候,不要使用relative,如有偏差,可以配合margin使用

一定要使用relative的時候,要保證作用范圍最小化

relative相關參考
CSS 相對/絕對(relative/absolute)定位系列（四）

GPU云服務器云服務器 position定位相對定位-絕對定位相對定位相對定位自適應

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111964.html

CSS詳細解讀定位

摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。一前言 CSS定位是CSS布局只能夠重要的一環。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。二正文 1.文檔流布局的概念將窗體自上而下分成一行行，并在每行中按從左至右的...

1treeS 2019-08-30 14:01 評論0 收藏0
前端技術之_CSS詳解第六天--完結

前端技術之_CSS詳解第六天--完結一、復習第五天的知識 a標簽的偽類4個：　　a:link 沒有被點擊過的鏈接　　a:visited 訪問過的鏈接　　a:hover 懸停　　a:active 按下鼠標不松手順序就是“love hate”準則。可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...

番茄西紅柿 2019-04-23 13:44 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評論0 收藏0
CSS入門指南-3：定位元素

摘要：靜態定位下，每個元素在處在常規文檔流中，它們都是塊級元素，所以會在頁面中自上而下地堆疊。這說明絕對定位的元素脫離了常規文檔流，它現在是相對于頂級元素在定位。事實上，一個相對定位元素同時設置了和位移屬性值，實際上優先級高于。這是《CSS設計指南》的讀書筆記，用于加深學習效果。前一篇CSS入門指南-2：盒子模型、浮動和清除介紹了css盒子模型、浮動和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評論0 收藏0
帶你走進CSS定位詳解

摘要：相對于其最近的一個定位設置的父對象進行絕對定位，可用。代碼基本語法默認值，無特殊定位。代碼相對定位相對定位生成相對定位的元素，相對于其它位置進行定位。結語結語帶你走進定位詳解，多試試，熟能生巧嘛學習CSS相關知識，定位是其中的重點，也是難點之一，如果不了解css定位有時候都不知道怎么用，下面整理了一下關于定位屬性的具體理解和應用方案。一：定位定位屬性列表 position top...

googollee 2019-04-23 13:29 評論0 收藏0
探究position定位中absolute和relative的異同

摘要：總結一下定位相對于誰進行定位有點復雜就是找出定位元素父元素鏈上的所有父元素，由近到遠哪個元素不是默認定位即定位的，那么就相對于它進行定位。當父元素鏈上所有父元素都是默認定位，那么定位就是相對于元素的，效果和定位差不多。相信學過CSS的同學都曾經對于position的各種屬性很困惑，尤其是absolute和relative定位，簡直就是傻傻分不清，筆者寫這篇文章就是希望通過代碼實驗的方...

NickZhou 2019-08-29 13:57 評論0 收藏0