解决overflow:hidden与定位一起使用子元素定位后元素被裁剪，隐藏不见问题

示例如下：<body><div class="b">b<div class="c">c</div></div></body>//css<style>.b{position: absolute;width: 300px;height: 300px;backgrou

MmM豆

26434人浏览 · 2020-06-16 17:07:40

MmM豆 · 2020-06-16 17:07:40 发布

文章目录

示例如下：

<body>
    <div class="b">
      b
      <div class="c">
        c
      </div>
    </div>
</body>

//css
  <style>
  
    .b{
      position: absolute;
      width: 300px;
      height: 300px;
      background: red;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      overflow: hidden;
      margin: auto;
    }
    .c{
      position: absolute;
      width: 100px;
      height: 100px;
      background: blue;
      left: 300px;
    }
  </style>

我定义了一个外层红色盒子绝对定位居中，又定义一个子元素蓝色盒子绝对定位，我需要的情况

在这里插入图片描述
但是实际展示是

审查元素发现，定位的蓝色盒子被裁减了

如果我们将容器b盒子的定位属性删除，c盒子又能正常显示，但却是相对于body定位

原因

这是因为在css中对overflow：hidden定义，如果定义overflow为包含容器，其子元素有定位属性，overflow将无法裁减，但当对包含容器也添加定位属性时，包含容器就能正常进行裁减

解决

但是我就是需要在b盒子使用overflow属性，如何解决呢？
按照上面出现的逻辑，我们的思路，就是给overflow属性的容器添加一个同样大小的父级用于定位

<body>
    <div class="a">
        <div class="b">
          b
          <div class="c">
            c
          </div>
        </div>
        
    </div>
</body>

  <style>
  .a{
      position: absolute;
      width: 300px;
      height: 300px;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;

  }
    .b{
      width: 300px;
      height: 300px;
      background: red;
      overflow: hidden;
    }
    .c{
      position: absolute;
      left: 300px;
      top: 0;
      width: 100px;
      height: 100px;
      background: blue;
    }
  </style>

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

【亲测推荐】停车场无人收费系统十大品牌：捷顺科技、宜泊科技等上榜

如发明了全球领先的“云岗亭”AI无人值守系统，利用先进的AI智能识别技术，不仅能准确识别车牌，还能对车型、车辆颜色等进行多维度识别，即使遇到套牌车等特殊情况，也能通过多维度信息进行精准判断、能实现真正的无人值守。其较高的维护成本和对网络环境的苛刻要求，限制了其在一些预算有限或网络条件不佳的场景中的应用。为了帮助大家更好地了解市场上各品牌的停车场无人收费系统，作为从事停车行业研究者，在基于行业调研与

2048 AI社区

【无标题】mysql约束

主键约束主键约束用于确保字段的值具有唯一性且非空。可以在创建表时添加主键约束：students (idnameVARCHAR(20)NOT NULLage18也可以在表创建后添加主键约束：students(id);5.2 主键+自增类型自增类型会选取表中主键的最大值，将最大值加1赋值给新插入记录的主键中的值，自动将主键自增。我们可以使用的形式来让数据库帮我们维护主键的增长。外键约束CONSTRAI