定位-絕對(duì)定位

番茄西紅柿發(fā)布于2019-04-23 13:23 / 3038人閱讀

摘要：定位元素輸出開(kāi)啟絕對(duì)定位，會(huì)使元素脫離文檔流開(kāi)啟絕對(duì)定位以后，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化相對(duì)于瀏覽器窗口進(jìn)行定位開(kāi)啟的定位并把作為的子元素輸出若有祖先元素開(kāi)啟了定位一般情況，開(kāi)啟了子元素的絕對(duì)定位

　　輸出：

　　1.開(kāi)啟絕對(duì)定位，會(huì)使元素脫離文檔流；

　　2、開(kāi)啟絕對(duì)定位以后，如果不設(shè)置偏移量，則元素的位置不會(huì)發(fā)生變化；

　　3、相對(duì)于瀏覽器窗口進(jìn)行定位；

開(kāi)啟box3的定位并把box2作為box3的子元素：

  .box2{
            width:100px;
            height: 100px;
            background-color: rgb(231, 223, 143);
            position: absolute;
            left: 100px;
            top:  100px;
      }
      .box3{
        width:100px;
        height: 100px;
        background-color: rgb(188, 211, 213);
        position: absolute;
      }

輸出：

若有祖先元素開(kāi)啟了定位（一般情況，開(kāi)啟了子元素的絕對(duì)定位都會(huì)同時(shí)開(kāi)啟父元素的相對(duì)定位）；

絕對(duì)定位是相對(duì)于離他最近的開(kāi)啟了定位的祖先元素進(jìn)行定位的；

絕對(duì)定位會(huì)使元素提高一個(gè)層級(jí)；

改變?cè)氐男再|(zhì)（塊聯(lián)元素變?yōu)閮?nèi)聯(lián)元素）；

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/1814.html

相關(guān)文章

【學(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ú)依賴(lài)絕對(duì)...

Anleb 2019-08-30 15:54 評(píng)論0 收藏0
CSS相對(duì)定位和絕對(duì)定位

摘要：三絕對(duì)定位拼爹型絕對(duì)定位不占有位置。父級(jí)有定位絕對(duì)定位是將元素依據(jù)最近的已經(jīng)定位絕對(duì)固定或相對(duì)的父元素祖先進(jìn)行定位。絕對(duì)定位的盒子水平垂直居中普通盒子左右居中用即可，但對(duì)于絕對(duì)定位的就無(wú)效了。為什么要學(xué)定位定位是CSS中的難點(diǎn)和重點(diǎn)，特別是后面學(xué)javascript特效時(shí)候，比如實(shí)現(xiàn)下拉菜單、彈框等，要蓋住下面內(nèi)容又不會(huì)影響下面內(nèi)容，比如要超出盒子一部分，比如屏幕中有一個(gè)小彈窗飄來(lái)...

xinhaip 2019-08-30 15:54 評(píng)論0 收藏0
web前端（12）—— 頁(yè)面布局2

摘要：是以首屏頁(yè)面左下角為參考點(diǎn)來(lái)調(diào)整位置。因?yàn)榻^對(duì)定位脫離標(biāo)準(zhǔn)流，影響頁(yè)面的布局。相反父相子絕在我們頁(yè)面布局中，是常用的布局方案。本篇博文，主要就講定位的問(wèn)題，也就是頁(yè)面布局里最重要的，本篇博文不出意外的話，也是css的最后一篇博文了定位，position屬性定位有三種：相對(duì)定位絕對(duì)定位固定定位相對(duì)定位，position：relative 相對(duì)定位的意思就是相對(duì)于自身元素原來(lái)...

番茄西紅柿 2019-04-23 13:11 評(píng)論0 收藏0
CSS入門(mén)指南-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入門(mén)指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

paulquei 2019-08-29 13:01 評(píng)論0 收藏0
CSS入門(mén)指南-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入門(mén)指南-2：盒子模型、浮動(dòng)和清除介紹了css盒子模型、浮動(dòng)和清除，這一篇介紹 css元素的定位。 ...

DesGemini 2019-08-01 17:15 評(píng)論0 收藏0
前端技術(shù)之_CSS詳解第六天--完結(jié)

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

番茄西紅柿 2019-04-23 13:44 評(píng)論0 收藏0