亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專(zhuān)欄INFORMATION COLUMN

祖先元素transform非none時(shí)在Iphone6上引起后代fixed/absolute元素的怪

MarvinZhang / 3017人閱讀

摘要：如題，祖先元素非時(shí)，記錄一下中引起后代元素參考視圖怪異表現(xiàn)和解決方案。不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口的位置來(lái)指定元素位置。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。

如題，祖先元素transform非none時(shí)，記錄一下Iphone6中引起后代元素fixed參考視圖怪異表現(xiàn)和解決方案。

層疊關(guān)系及參考視圖

層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相對(duì)于面向（電腦屏幕的）視窗或者網(wǎng)頁(yè)的用戶(hù)的z軸上延伸，HTML元素依據(jù)其自身屬性按照優(yōu)先級(jí)順序占用層疊上下文的空間。
文檔中的層疊上下文由滿(mǎn)足以下任意一個(gè)條件的元素形成：

根元素 (HTML),

z-index 值不為 "auto"的 絕對(duì)/相對(duì)定位，

一個(gè) z-index 值不為 "auto"的 flex 項(xiàng)目 (flex item)，即：父元素 display: flex|inline-flex，

opacity 屬性值小于 1 的元素，

transform 屬性值不為 "none"的元素，

mix-blend-mode 屬性值不為 "normal"的元素，

filter值不為“none”的元素，

perspective值不為“none”的元素，

isolation 屬性被設(shè)置為 "isolate"的元素，

position: fixed

在 will-change 中指定了任意 CSS 屬性，即便你沒(méi)有直接指定這些屬性的值（參考 這篇文章）

-webkit-overflow-scrolling 屬性被設(shè)置 "touch"的元素

關(guān)于層疊上下文的層級(jí)及創(chuàng)建，可以參考下張?chǎng)涡翊笊竦纳钊肜斫釩SS中的層疊上下文和層疊順序，相當(dāng)詳細(xì)；在今天討論的問(wèn)題中，知道position:fixed和transform非none都會(huì)創(chuàng)建新的層疊上下文，至于層級(jí)，在同一層疊上下文中，取決于后來(lái)居上及孰大孰上兩個(gè)規(guī)則。
至于參考視圖，兩句話

absolute：不為元素預(yù)留空間，通過(guò)指定元素相對(duì)于最近的非 static 定位祖先元素的偏移，來(lái)確定元素位置。
fixed： 不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口（viewport）的位置來(lái)指定元素位置。元素的位置在屏幕滾動(dòng)時(shí)不會(huì)改變。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。fixed 屬性會(huì)創(chuàng)建新的層疊上下文。當(dāng)元素祖先的 transform  屬性非 none 時(shí)，容器由視口改為該祖先。

祖先元素transform屬性不為none對(duì)子元素fixed的影響
不考慮其他因素的前提下，祖先元素的transform屬性不為none時(shí)，按照規(guī)范，后代元素的表現(xiàn)應(yīng)為：

absolute元素依然保持以最近的非position: static;的元素為參考,其中祖先元素也會(huì)被視為非position: static;

fixed元素默認(rèn)的參考視圖是屏幕視口，在這里，祖先元素transform被設(shè)置為非none時(shí)，后代元素的參考視圖應(yīng)該是祖先元素；
Iphone6（未排查IOS版本）當(dāng)中，不管祖先元素定位屬性，子代元素定位屬性為absolute/fixed時(shí)，子代的子代及再往后的子代，定位屬性為fixed時(shí)，定位視圖并不是祖先元素

祖先元素的子元素：定位視圖是祖先元素；正常

祖先元素的子元素的子元素：定位視圖是祖先元素；正常

祖先元素的子元素的子元素的子元素：以父級(jí)元素的左上角坐標(biāo)為起點(diǎn)，祖先元素的長(zhǎng)寬為長(zhǎng)寬，畫(huà)一個(gè)虛擬的視圖，定位視圖就是這個(gè)虛擬的視圖；異常

祖先元素的子元素的子元素的子元素的往后每一代，都沿襲第三代開(kāi)始的表現(xiàn)，依當(dāng)前元素的父元素左上角坐標(biāo)為起點(diǎn)，祖先元素長(zhǎng)寬為長(zhǎng)寬的虛擬視圖為定位視圖；異常
看代碼及圖：

/* html */

1
    
2
        
3
            
4
                
5
                    
6

                

            

        

    



/* css */
.red{
    width: 150px;
    height: 150px;
    background: red;
    text-align: center;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}
.green{
    position: absolute;
    width: 120px;
    height: 120px;
    left: 0px;
    top: 0px;
    background: green;
}
.yellow{
    position: fixed;
    width: 80px;
    height: 80px;
    left: 0px;
    bottom: 0px;
    background: yellow;
}
.black{
    position: fixed;
    width: 50px;
    height: 50px;
    right: 0px;
    top: 0px;
    background: black;
}
.aquamarine{
    position: fixed;
    width: 30px;
    height: 30px;
    right: 0px;
    bottom: 0px;
    background: aquamarine;
}
.blue{
    position: fixed;
    width: 10px;
    height: 10px;
    right: 0px;
    bottom: 0px;
    background: blue;
}


左邊圖為正常情況下的表現(xiàn)，transform所有后代元素的fixed參考視圖都是transform的祖先元素，而右邊的是iphone6上的表現(xiàn)，從第三代開(kāi)始，參考視圖變更為以父級(jí)元素左上角位置為起點(diǎn)，祖先元素長(zhǎng)寬為長(zhǎng)寬的虛擬視圖為參考視圖。因此情況變得不可控。

解決方案

既然事情因transform引起，就在fixed定位嵌套三層以上時(shí)慎用transform，這個(gè)為最基本的解決方案。

好吧，我沒(méi)找到其他辦法

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

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

相關(guān)文章

  • 祖先元素transform非none時(shí)在Iphone6上引起后代fixed/absolute元素的怪

    摘要：如題，祖先元素非時(shí)，記錄一下中引起后代元素參考視圖怪異表現(xiàn)和解決方案。不為元素預(yù)留空間，而是通過(guò)指定元素相對(duì)于屏幕視口的位置來(lái)指定元素位置。打印時(shí)，元素會(huì)出現(xiàn)在的每頁(yè)的固定位置。 如題，祖先元素transform非none時(shí)，記錄一下Iphone6中引起后代元素fixed參考視圖怪異表現(xiàn)和解決方案。 層疊關(guān)系及參考視圖 層疊上下文是HTML元素的三維概念，這些HTML元素在一條假想的相...

    lei___ 評(píng)論0 收藏0

  • 我所了解的CSS包含塊

    摘要：根元素包含塊根元素的包含塊是一個(gè)矩形叫做初始化包含塊。如果屬性是的話，包含塊就是由組成的。示例二代碼在這里，這個(gè)標(biāo)簽為默認(rèn)的且它的父標(biāo)簽的為，所以標(biāo)簽的包含塊為標(biāo)簽，通過(guò)我們的判斷規(guī)則一來(lái)確定。 寫(xiě)在前面，本文將同步發(fā)布于Blog、掘金、segmentfault、知乎等處，如果本文對(duì)你有幫助，記得為我得到我的個(gè)人技術(shù)博客項(xiàng)目給個(gè)star哦。 指出錯(cuò)誤觀念 許多開(kāi)發(fā)者認(rèn)為一個(gè)元素的包含塊...

    BenCHou 評(píng)論0 收藏0

  • CSS 面試題總結(jié)

    摘要：而名作為標(biāo)簽的身份則是唯一的，在頁(yè)面中只能出現(xiàn)一次。會(huì)導(dǎo)致父容器高度塌陷。堆疊順序由元素在文檔中的先后位置決定，后出現(xiàn)的會(huì)在上面。之后的內(nèi)聯(lián)對(duì)象會(huì)被排列在同一行內(nèi)。的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清除浮動(dòng)。 CSS 中類(lèi) (classes) 和 ID 的區(qū)別。 書(shū)寫(xiě)上的差別：class名用.號(hào)開(kāi)頭來(lái)定義，id名用#號(hào)開(kāi)頭來(lái)定義； 優(yōu)先級(jí)不同（權(quán)重不同） 調(diào)用上的...

    tomato 評(píng)論0 收藏0

  • 前端面試筆記 - css

    摘要：是頁(yè)面渲染的一部分。一個(gè)就是一個(gè)整體，所有子元素都會(huì)在里面渲染，而不會(huì)影響外面的元素。常見(jiàn)為，根元素，，元素，或者設(shè)置了的元素列舉不同的清除浮動(dòng)的技巧，并指出它們各自適用的使用場(chǎng)景。是一個(gè)把眾多小圖片打包成一個(gè)大圖以減少請(qǐng)求。 CSS 中類(lèi) (classes) 和 ID 的區(qū)別。 id唯一，class可以多個(gè) 請(qǐng)問(wèn) resetting 和 normalizing CSS 之間的區(qū)別？你...

    loonggg 評(píng)論0 收藏0

  • css基礎(chǔ)

    摘要：在元素之后添加內(nèi)容控制表單控件的禁用狀態(tài)。生成相對(duì)定位的元素，相對(duì)于其正常位置進(jìn)行定位。由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。 CSS display: none; 與 visibility: hidden; 的區(qū)別 聯(lián)系：它們都能讓元素不可見(jiàn) 區(qū)別： display:none;會(huì)讓元素完全從渲染樹(shù)中消失，渲染的時(shí)候不占據(jù)任何空間；vi...

    JinB 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<