亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

css3 transform導致子元素固定定位變成絕對定位的方法

  發(fā)布時間：2020-03-06 16:30:15   作者：伴伴   我要評論
這篇文章主要介紹了css3 transform導致子元素固定定位變成絕對定位的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

 本文介紹了css3 transform導致子元素固定定位變成絕對定位的方法，分享給大家，也給我自己留個筆記，方便查找。

<!DOCTYPE html>
<html>
<head>
<style>
   body {
    background: #f60; // 橙色
   }
  .parent {
     position: fixed;
     width: 300px;
     height: 300px;
     right: 0;
     top: 0;
     background: #02bd00;  // 綠色
     transform: translateX(0);                 
  }
  .child {
     position: fixed;
     left: 0;
     right: 0;
     top: 0;
     bottom: 0;    
     background: rgba(0,0,0,0.2); // 黑色透明：蒙層
  }
</style>
</head>
<body>

<div class="parent">
  <div class="child"></div>
</div>

</body>
</html>

問題相對于沒有遇到過的同學不太容易查找原因。貼個圖看下效果（只有綠色部分有蒙層，但我們可能以為自己的寫法沒有問題。）

其實我們想要的子元素全屏效果，需要設置transform: none；

問題比較典型：父級元素設置有效的transform屬性會導致子元素固定變成絕對元素， 此時會導致子元素和父級元素相同大小. 此時查看子元素的offsetTop和offsetLeft都是0，需要引起注意。
出現(xiàn)場景： 通常會在框架UI的基礎上自定義增加樣式時候出現(xiàn)。

 到此這篇關于css3 transform導致子元素固定定位變成絕對定位的方法的文章就介紹到這了,更多相關css3 transform 子元素固定內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持腳本之家！

相關文章

  • CSS之定位布局(position，定位布局技巧)

    css中的position屬性，position有四個值：absolute/relative/fixed/static(絕對/相對/固定/靜態(tài)(默認))通過定位屬性可以設置一些不規(guī)則的布局，使用TLBR(top,left,bottom,r
    2020-03-22

  • 關于CSS中定位的小結

    CSS中定位有四種在不同的場景下有不同的作用，本文給大家介紹關于CSS中定位的相關知識，通過實例代碼截圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值
    2020-03-20

  • css定位position引發(fā)的層級關系問題詳解

    這篇文章主要介紹了css定位position引發(fā)的層級關系問題詳解，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來
    2020-02-10

  • 深入學習CSS中如何使用定位(小結)

    這篇文章主要介紹了深入學習CSS中如何使用定位(小結)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學
    2019-12-30

  • 詳解css粘性定位position：sticky問題采坑

    這篇文章主要介紹了詳解css粘性定位position：sticky問題采坑的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下
    2019-08-26

  • CSS中的四種定位區(qū)別詳解

    這篇文章主要介紹了CSS中的四種定位有什么區(qū)別，本文通過實例圖文相結合給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧
    2020-07-23

最新評論