position:absolute

1、float與absolute

  1. 當float和absolute同時存在的時候，float時么有任何效果的，所以沒有必要同時啟用float和absolute

  2. 兩個具有相似性，相似點包括

    1. 塊狀化和浮動類似，直接把元素display表現(xiàn)成block或者是table
    2. 破壞性，破壞正常的流的持續(xù)性。
    3. 塊狀格式化上下文 BFC
    4. 包裹性，元素不會自動填充，而是由內(nèi)容撐起來的 所以沒必要使用display:inline-block,如果元素顯示或者無依賴定位，可以使用display:inline

1、包含塊

普通元素寬度的百分比是針對于父級元素的context box的寬度計算的，但是 absolute是對于上邊第一個position不為static的祖先元素計算的。包含塊的計算規(guī)則：

  1. 根元素 <html>

  2. 對于其他元素，如果這個元素的position是relative或者是static那么包含塊就是最近的祖先的content box邊界

  3. 如果position:fixed的包含塊是’初始包含塊‘

  4. position:absolute的包含塊是最近的position不為static的祖先元素建立

    • 如果祖先是個純inline的呢么
      • 假設(shè)給內(nèi)聯(lián)元素的前后各生成一個寬度為0的內(nèi)聯(lián)盒子，那么這兩個內(nèi)聯(lián)盒子的padding box外邊的包圍盒就是內(nèi)聯(lián)元素的包含塊，內(nèi)聯(lián)元素的包含塊受::first-line偽元素的影響，但是不受::first-letter偽元素的影響
      • 如果這個內(nèi)聯(lián)元素被跨行分割，那么包含塊沒有定義，自行發(fā)揮
    • 其他情況就是祖先padding box的邊界形成的

如下是內(nèi)聯(lián)元素作為包含塊講解：

我們用的少的原因：

  1. 使用了absolute定位，都是用來布局的，但是內(nèi)聯(lián)元素用來圖文展示，所以不好碰上

  2. 理解成本比較高，

    <div class="point01">
        <span style="position: relative;">  我是  <big style="font-size: 200%">字號很大的</big>文字</span>
</div>

 ![image-20180519135748133.png](https://upload-images.jianshu.io/upload_images/3819791-3dcf73ead48a6ec0.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)


  可以看到，內(nèi)聯(lián)元素的包含塊是由生成的前后內(nèi)聯(lián)盒子決定的，和里邊的內(nèi)聯(lián)盒子的細節(jié)沒任何關(guān)系

  1. 兼容性問題，

    1. 內(nèi)聯(lián)元素單行的時候： 包含塊是個空元素的時候，
    2. 多行的時候，因為行為沒有被定義，所以自由發(fā)揮

絕對定位元素 計算包含塊

最近的position不為static的祖先元素建立

這里我們引申一下，

? height:100% 是第一惡搞具有定位元素的屬性值的祖先元素的高度，

height:inherit  單純的父親高度的繼承

包裹性帶來的寬度自適應(yīng)性是由包含塊來計算的：

<div class="box">我是文字，</div>
<style>
.point01 .box{
    position: absolute;
}
</style>

這個時候是不會換行的，但是如果有很多字的話，會不會換行？

在通常場景下，.box 元素寬度就是里邊文字的寬度，不會換行，但是文字越來越多，。box元素就會越來越大，不會無限大下去，因為超過一定限制就會自動換行，這里的限制就是。box的包含塊

絕對定位元素默認的最大寬度就是“包含塊”的寬度

但是當我們的包含塊的寬度足夠小，放不下幾個文字的時候，就會怪異如下：

<a href="javascript:" class="icon-delete tips" data-title="刪除"></a>


.tips[data-title] {
    position: relative;
}

.tips[data-title]::before,
.tips[data-title]::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    visibility: hidden;
}

.tips[data-title]::before {
    content: attr(data-title);
    top: -33px;
    padding: 2px 10px 3px;
    line-height: 18px;
    border-radius: 2px;
    /*white-space: nowrap;*/
    background-color: #333;
    text-align: left;
    color: #fff;
    font-size: 12px;
}

.tips[data-title]::after {
    content: "";
    border: 6px solid transparent;
    border-top-color: #333;
    top: -10px;
}

.tips[data-title]:hover::before,
.tips[data-title]:hover::after {
    transition: visibility .1s .1s;
    visibility: visible;
}

.icon-delete {
    display: inline-block;
    width: 20px; height: 20px;
    background: url(../img/delete@2x.png) no-repeat center;
    background-size: 16px;
}
image-20180519154640265.png

如果把注釋的代碼解開就是：

image-20180519154827861.png

上述的代碼，after用來做小尖頭，然后before用來做文本框

這里還有一個隱藏的技術(shù)：content: attr(data-title);動態(tài)設(shè)置文檔

定位和計算是相對于祖先元素的padding box的

2、具有相對特性的 無依賴absolute絕對定位

如果一個position，如果沒有任何的left right top bottom那他會在那里？他會在當前位置！

absolute是非常獨立的css屬性值，樣式和行為不依賴任何的css都可以完成

無依賴絕對定位 ：沒有任何的left right top bottom屬性

使用無依賴絕對定位 特性：代碼簡潔 相對定位

幾個案例：

1、各類圖標定位

<div class="menu">
    <span>普通導(dǎo)航</span>
    <span > 熱門導(dǎo)航<i class="icon-hot"></i></span>
    <span>新導(dǎo)航</span>
</div>

.point03 span{
    list-style-type: none;
    float: left;
    line-height: 70px;
    padding-left: 30px;
    /*display: inline-block;*/
}
.point03 .menu{
    height: 70px;
    background: gray;
}
.icon-hot{
    position: absolute; 
    margin:-6px 0 0 2px;
    width: 28px;
    height:11px;
    background: url("../img/hot.gif");
}
image-20180519162604956.png

這里圖標就在文件后頭，還不影響正常的排序

position:absolute然后用margin偏移實現(xiàn)，兼容性很好，和inline-block對齊相比較，好處在于inline-block最終對齊的行框高度會變大，中文下沉，圖表居中，想要視覺上的居中，vertical-align會讓圖標比實際的低一點，而且行高變大，但是用”無依賴“實現(xiàn)這些的時候，完全不用擔心正常流空間的尺寸

2、超越常規(guī)的布局排版

<div class="point04">
    <div class="form">
        <div class="line">
            <label for="mail"><span class="icon-star">*</span>郵箱</label><input type="email" id="mail">
            <span class="regist-remark regist-warn">
                <i class="icon-warn"></i>郵箱格式不準確（示意）
            </span>
        </div>
        <div class="line">
            <label for="pass">密碼</label><input type="text" id="pass">
        </div>
        <div class="line">
            <label for="tel">手機號碼</label><input type="text" id="tel">
        </div>



    </div>
</div>

.point04 .form{
    width:356px;
    margin: auto;
}
.point04 .form .line{
    margin: 30px;
     display: block;
 }
.point04 .line label{
    display: inline-block;
    width: 100px;
    text-align: left;
}
.point04 input{
    height: 30px;
    width:170px;
}
/*以下是星星還有提示信息的樣式*/
.icon-star{
    position: absolute;
    margin-left: -1em;
    color: #f30;
}
.regist-remark {
    position: absolute;
    margin: 8px 0 0 10px;
    color: #666;
}


/* 郵箱報錯那里的警示小圖標 */
.regist-warn {
    padding-left: 16px;
    color: #be0000;
}
.icon-warn {
    position: absolute;
    margin-left: -18px;
    width: 16px; height: 20px;
    background: url(../img/warn.gif) no-repeat center;
}
image-20180519165147134.png

這里前邊的*還有后頭的提示都跳出了寬度的限制，而且，如果把框框變窄，也會隨著變化。

3、下拉框的實現(xiàn)：

.point05 input{
    width: 200px; height: 20px;
    line-height: 20px;
    padding: 9px 39px 9px 9px;
    border: 1px solid #ddd;
}
.point05 .search-btn {
    width: 20px; height: 20px;
    border: 9px solid #fff;
    background: #ddd url(../img/search.png) no-repeat center;
    position: absolute; margin: 1px 0 0 -40px;
    /*隱藏文字*/
    text-indent:-9em;
    overflow: hidden;
}

.point05 .search-datalist{
    position: absolute;
    width:248px;
    border:1px solid #e6e8e9;
}
.point05 .search-datalist a{
    display: block;
    line-height: 36px;
    padding-left: 12px;
    color: #5e5e5e;
    text-decoration: none;
}

.point05 .search-result{
    display: none;
}
.search-input:focus~.search-result{
    display: block;
}
image-20180519170919311.png

主要是放大鏡還有下來框的定位，用到了position然后用margin進行修飾

4、進一步深入“無依賴絕對定位”

雖然說 absolute后的代碼，display是block，但是其定位的位置和沒有設(shè)置position:absolute時候的位置相關(guān)。

<div>這里是一大串的文字，如果我后頭的<span style="position:absolute;">span元素設(shè)置成position，那么他的display模式將會是block但是定位的時候，還是按行內(nèi)元素的來</span></div>
image-20180519172150069.png

如圖所示，span后頭的文字并沒有換行，說明并沒有按照display來定位地址的

3、absolute 和text-align

講道理，absolute和float一樣將元素的display變成block。理論上對text-align無感，但是萬萬沒想到，text-align對absolute居然有影響

<p style="text-align: center;"><img src="./img/test02.jpeg" style="position:absolute;" alt=""></p>
image-20180519173655324.png

具體的渲染原理如下：

  1. 由于img是內(nèi)聯(lián)水平，p中僅僅存在一個寬度為0的幽靈空白點，所以影響了布局方式

  2. 如果要讓圖片居中實現(xiàn)，只需要讓圖片margin-left一半寬度就好了

    <p style="text-align: center;"><img src="./img/test02.jpeg" style="position:absolute;margin-left: -204px" alt=""></p>
image-20180519174040905.png

2、 absolute和overflow

overflow對absolute元素裁剪規(guī)則：絕對定位元素不總是被父級overflow屬性裁剪，尤其當overflow在絕對定位元素及其包含塊之間的時候

<div class="point08">
    <div style="position:relative;">
    <div style="overflow: hidden;">
        <img src="./img/test.png" style="position:absolute;" alt=""></div></div>
</div>
image-20180519180659323.png

你看，雖然overflow在img的上邊，高度為空，外邊由position，但是還是無法裁剪這個圖片

<div style="overflow: hidden;position:relative;">
    <img src="./img/test.png" style="position:absolute;" alt=""></div>

這個就會進行裁剪，因為overflow在包含塊上

如果overflow的值不是hidden而是scroll或者是auto也不會出現(xiàn)滾動條

這個特性 可以用來實現(xiàn)某個元素不隨著滾動條滾動的效果

css3中 當大家遇到absolute被剪裁，或者fixed失效的時候，看看是不是transform屬性作祟

3、absolute和clip

css中，有些屬性必須綁定使用才有效果，比如說clip屬性，必須是絕對定位或者是固定定位

clip:rect(top,right,bottom,left)

注意上邊的用法，不能縮寫，不能用百分號 ，可以由逗號，也可以沒有逗號

clip的使用方法：

  1. fixed股定位的剪裁，如果在定位中，想要剪裁，一般是需要overflow作用在包含塊上的，但是，fixed的包含塊是html，這里他可能有心無力，所以還是需要clip來進行剪裁的。

  2. 最佳可訪問性隱蔽 內(nèi)容雖然看不見，但是能被機器讀取，同時還占用原來的空間 兼容性好，任何元素，任何場景都可以無障礙使用之。

    隱藏文件的方法：

    1. display:none:不推薦，這個機器無法讀取到
    2. Text-align:縮進，但是如果文字縮進的太大了，大到屏幕之外，屏幕閱讀設(shè)備也不會讀取的
    3. color：transparaent移動端上推薦，但是pc很難用簡單的方式阻止文本被選中
    4. clip:視覺上隱藏了，但是可以被機器讀取到
<div class="point09">
    <div class="box"><img  class="img01" src="./img/test02.jpeg" alt=""></div>

    <div class="box"><img  class="img02" src="./img/test02.jpeg" alt=""></div>
</div>

.point09 .box{
    float: left;
    width:300px;
    height:300px;
    background-color: #f0f3f9;
    position: relative;
    overflow: auto;
}
.point09 img{
     position: absolute;
 }
.point09 .img02{
    position: absolute;
    clip:rect(0 0 0 0 );
}
image-20180519190732170.png

4、absolute的流體特性

1 left top right bottom屬性

當absolute遇上left top right bottom 等的時候，absolute才真正的變成了絕對定位元素。這個時候，會絕對定位于包含塊的左上角為原點，的top right bottom left確定的點上。喪失了原有屬性和相對特性

如果只設(shè)置了一個方向的絕對定位，那么，另一個方向依然保持了相對特性

<div class="box" style="position:relative;">
    <span class="div">我們這里看如果只給absolute元素設(shè)置但方向的絕對值時候，另一個方向的絕對值怎么樣</span><span style="position:absolute;top:30px;">這里是絕對定位</span>

</div>
image-20180519192031290.png

2、流體特性

當一個絕對定位元素上，對立定位的方向同時具有定位數(shù)值的時候，流體特性就發(fā)生了，比如

left:0;right:20px;

如上，并不一定兩邊都是零，只要由數(shù)值，position就會喪失包裹性，從而能夠進行填充。

這個時候填充到padding box的大小，那么如下兩個css有什么區(qū)別呢？

.box01{
    position:absolute;
    left:0;right:0;top:0;bottom:0;
    padding:30px;
}
.box02{
    position:absolute;
    left:0;top:0;
    padding:30px;
    width:100%;height:100%;
}

很明顯，設(shè)置了padding后，box2 的高度寬度都比原來增加了，而box01是內(nèi)部縮小，box01更體現(xiàn)出流體特性

同時這種情況，對我們的布局非常有價值，因為子元素的height百分比可以生效了，高度自適應(yīng)高度等比例等布局都可以實現(xiàn)了。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容