定位-絕對定位

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

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

　　輸出：

　　1.開啟絕對定位，會使元素脫離文檔流；

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

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

開啟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;
      }

輸出：

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

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

絕對定位會使元素提高一個(gè)層級；

改變元素的性質(zhì)（塊聯(lián)元素變?yōu)閮?nèi)聯(lián)元素）；

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

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

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

相關(guān)文章

【學(xué)習(xí)筆記】CSS深入理解之a(chǎn)bsolute

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

Anleb 2019-08-30 15:54 評論0 收藏0
CSS相對定位和絕對定位

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

xinhaip 2019-08-30 15:54 評論0 收藏0
web前端（12）—— 頁面布局2

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

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

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

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

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

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

前端技術(shù)之_CSS詳解第六天--完結(jié) 一、復(fù)習(xí)第五天的知識 a標(biāo)簽的偽類4個(gè)：　　a:link 沒有被點(diǎn)擊過的鏈接　　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