• 解决absolute绝对定位带来的div穿透问题

    首先来看症状：

     按理说蓝色和红色div应该并排同行显示，但是很明显：两个元素重叠了

    代码如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>AbsoluteFloatTest</title>
    8.     <style>
    9.       .wrapper {
    10.         position: relative;
    11.         width: 100%;
    12.         height: 200px;
    13.         overflow: hidden;
    14.       }
    15.  
    16.       div {     
    17.         height: 100px;
    18.       }
    19.       .first {
    20.         position: absolute;
    21.         width: 100px;
    22.         top: 0;
    23.         background: blue;
    24.       
    25.       }
    26.  
    27.       .second {
    28.         width: 150px;
    29.         background: red;
    30.         
    31.       }
    32.  
    33.      .fl {
    34.         float: left
    35.      }
    36.  
    37.     </style>
    38. </head>
    39. <body>
    40.     <div class="wrapper">
    41.         <div class="first fl"></div>
    42.         <div class="second fl"></div>
    43.     </div>
    44.     
    45. </body>
    46. </html>

    再看一个例子：

    同样也重叠了。

    那么问题的原因到底是什么？

    这里需要对absolute绝对定位有充分深度的了解。

    absolute绝对定位有一个非常重要的特征： 它会使元素脱离正常文档流，并且不占据任何空间

    换句话说：使用绝对定位的元素，因为释放了文档流，会导致它后面的元素，往前移动填充它所占据的空间，这就是为什么会出现前面元素重叠问题的原因

    如果我们要解决这个问题，有以下两个办法：

    １.　让后面的元素使用left调整位置

     但是因为这个定位是相对于根元素的最左边，需要手动计算left偏移距离，而且会造成它后面的元素也会产生重叠的问题，那么后面的每个元素都需要设置left定位属性，而且是手动计算从最左边开始的left值。这个过程相当繁琐，失去了通过div浮动实现水平排列的便利优势。

     2.  弃用absolute绝对定位，使用float或者flex来实现元素的水平排列。

     

    所以一般情况下，不要轻易使用absolute绝对定位，因为它的坑实在是太大了， 它会使元素脱离正常文档流，并且不占据任何空间，使用绝对定位的元素，因为释放了文档流，会导致它后面的元素，往前移动填充它所占据的空间，从而造成元素重叠。

    使用绝对定位的场景： 一般是需要子元素对父级元素做相对定位：

    此时父级元素设置：position : relative

          而子元素设置： position:　absolute  

          而由于子元素使用了绝对定位，那么也就是释放了文档流，此时必须使用left/right/top/bottom等属性进行定位！

     比如下面的例子：

  • 相关阅读:
    后端研发工程师面经——Spring
    C/C++基于词频的文件相似度
    学习java的第二十二天。。。（异常）
    mysql索引失效的几种情况
    DigiCert代码签名证书都支持有哪些加密算法
    计算机中的信息单位
    Spring Security和oauth2的关系
    Spring Boot整合Redis实现缓存(实战详细)
    工业互联网安全备受关注，防御体系该如何建设？
    硬件知识：独立显卡和集成显卡的区别，你知道吗？
  • 原文地址：https://blog.csdn.net/jiaohuizhuang6019/article/details/132789722