定位-絕對定位

番茄西紅柿發布于2019-04-23 13:23 / 2966人閱讀

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

　　輸出：

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

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

　　3、相對于瀏覽器窗口進行定位；

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

輸出：

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

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

絕對定位會使元素提高一個層級；

改變元素的性質（塊聯元素變為內聯元素）；

云服務器 GPU云服務器相對定位-絕對定位絕對定位絕對定位布局中的絕對定位

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

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

【學習筆記】CSS深入理解之absolute

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

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

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

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

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

番茄西紅柿 2019-04-23 13:11 評論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詳解第六天--完結一、復習第五天的知識 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