相對定位(Relative positioning)

cyixlq 發(fā)布于2019-08-29 12:32 / 3419人閱讀

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

當(dāng)一個盒根據(jù)常規(guī)流或者浮動擺放好后，它可能會相對于該位置移動，這叫相對定位。
相對定位的盒保持它在常規(guī)流中的大小，包括換行和空格都會原樣保留

relative與absolute,fixed

relative與absolute的關(guān)系

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

也就是說relative可以:

限制left/top/right/bottom定位

限制z-index層級

限制在overflow下失效的問題

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

relative與定位

relative與自身的定位

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

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

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

relative與z-index

relative與z-index關(guān)系

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

relative最小化影響原則

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

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

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

GPU云服務(wù)器云服務(wù)器 position定位相對定位-絕對定位相對定位相對定位自適應(yīng)

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/111964.html

相關(guān)文章

CSS詳細(xì)解讀定位

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

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

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

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

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

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

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

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

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

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

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

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