# CSS 絕對(duì)定位釋義

JouyPub 發(fā)布于2019-08-29 17:28 / 1507人閱讀

摘要：之前看過(guò)多次絕對(duì)定位，但是缺乏一個(gè)好的案例。如果想要讓第二個(gè)覆蓋第一個(gè)怎么辦此時(shí)就必須取消默認(rèn)排版過(guò)程，轉(zhuǎn)而使用絕對(duì)定位。方法就是設(shè)置直接相對(duì)定位，距離為即可。

之前看過(guò)多次CSS絕對(duì)定位，但是缺乏一個(gè)好的案例。偶爾看到一個(gè)控件，覺(jué)得用它來(lái)說(shuō)明是非常簡(jiǎn)明的。

假設(shè)我們有一個(gè)DIV，內(nèi)部還嵌入兩個(gè)平級(jí)的DIV，代碼如下：

那么按照默認(rèn)的盒子模型，兩個(gè)平級(jí)的DIV一上一下，占滿整個(gè)父親DIV。如果想要讓第二個(gè)DIV覆蓋第一個(gè)怎么辦？

此時(shí)就必須取消默認(rèn)排版過(guò)程，轉(zhuǎn)而使用絕對(duì)定位。方法就是設(shè)置.block2直接相對(duì).wrapper定位，top距離為0即可。具體做法就是在.wrapper內(nèi)加入代碼：

position:relative

添加CSS代碼到.block2內(nèi)：

position:absolute;top:0;

就可以看到.block2覆蓋于.block1之上。這樣就達(dá)到了我們希望的效果了。

使用完全相同的結(jié)構(gòu)，我們可以制作一個(gè)進(jìn)度條控件：

10%

這里的.label正是通過(guò)對(duì)其父容器.progress的絕對(duì)定位，實(shí)現(xiàn)了.bar和.label的重合，從而實(shí)現(xiàn)的進(jìn)度條效果。

GPU云服務(wù)器云服務(wù)器相對(duì)定位-絕對(duì)定位絕對(duì)定位絕對(duì)定位布局中的絕對(duì)定位

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

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

相關(guān)文章

CSS Grid 讀書(shū)筆記

摘要：和絕對(duì)定位和絕對(duì)定位如果父容器有定位標(biāo)識(shí)等，那么下面的子會(huì)根據(jù)原始它們應(yīng)該布局的位置定位，反之如果父容器沒(méi)有定位標(biāo)識(shí)，那么應(yīng)用了會(huì)脫離布局，并且按照傳統(tǒng)的方式布局?；靖拍?MDN上的解釋是這樣的 CSS Grid Layout excels at dividing a page into major regions or defining the relationship in term...

liuhh 2019-04-23 13:22 評(píng)論0 收藏0
# 翻譯：Shadow DOM隔離釋義

摘要：使用的一個(gè)主要好處是樣式隔離。假設(shè)我們?nèi)匀皇褂脕?lái)掛接這個(gè)，如下所示請(qǐng)注意，元素位于模板元素內(nèi)部，并與一起克隆到內(nèi)。這允許在陰影根中定義的樣式規(guī)則作用域。封閉模式的設(shè)計(jì)目標(biāo)是禁止對(duì)來(lái)自外部世界的中的節(jié)點(diǎn)進(jìn)行任何訪問(wèn)。使用shadow DOM的一個(gè)主要好處是樣式隔離。要了解這意味著什么，讓我們來(lái)假設(shè)我們要?jiǎng)?chuàng)建自定義進(jìn)度條組件。我們可以使用兩個(gè)嵌套的DIV來(lái)顯示條形，使用另一個(gè)DIV來(lái)...

xi4oh4o 2019-08-23 13:53 評(píng)論0 收藏0
【學(xué)習(xí)筆記】CSS深入理解之a(chǎn)bsolute

摘要：張?chǎng)涡竦纳钊肜斫庵畬W(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。利用絕對(duì)定位元素脫離文檔流的特性，使用動(dòng)畫(huà)可以避免大范圍的回流和重繪。絕對(duì)定位元素拉伸實(shí)現(xiàn)寬高自適應(yīng)，可應(yīng)用于大范圍的布局。《張?chǎng)涡竦腃SS深入理解之a(chǎn)bsolute》學(xué)習(xí)筆記絕對(duì)定位的特性絕對(duì)定位與浮動(dòng)相似，都有破壞性和包裹性。浮動(dòng)的一些應(yīng)用場(chǎng)景中也可用絕對(duì)定位替代絕對(duì)定位的行為表現(xiàn) 無(wú)依賴絕對(duì)...

Anleb 2019-08-30 15:54 評(píng)論0 收藏0
CSS入門指南-3：定位元素

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

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

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

DesGemini 2019-08-01 17:15 評(píng)論0 收藏0