子盒子定位右边出现滚动条，定位左边则不会

最新推荐文章于 2024-07-09 19:50:17 发布

Lysun001

最新推荐文章于 2024-07-09 19:50:17 发布

阅读量509

点赞数 3

文章标签： html 前端 css3 css

本文链接：https://blog.csdn.net/lotpyve/article/details/139445244

版权

先来看一下问题，就是当我们在给子盒子设置定位是 position: absolute;并且 right 为负的时候，可能就会由于子盒子定位在右边而使底部出现可以左右滑动的滚动条

代码案例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      div {
        padding: 0;
        margin: 0;
      }
      .box {
        width: 100%;
        height: 500px;
        background-color: pink;
      }
      .right {
        width: 100px;
        height: 100px;
        background-color: yellow;
        position: absolute;
        right: -50px;
        /* left: -50px; */
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="box">
      456

      <div class="right"></div>
    </div>
  </body>
</html>

显示结果：

可以看到，这个时候，出现了滚动条的，但是同样的，如果我们把 right: -50px;换为 left: -50px;他则不会出现滚动条，具体原因嘛，我也不知道，不过我尝试了之后，找到解决方法，在这里分享一下

解决方法：给父盒子的css加上这两条，就可以解决了，缺一不可

position: relative;

overflow: hidden;

Lysun001

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
子盒子定位右边出现滚动条，定位左边则不会

可以看到，这个时候，出现了滚动条的，但是同样的，如果我们把 right: -50px;换为 left: -50px;他则不会出现滚动条，具体原因嘛，我也不知道，不过我尝试了之后，找到解决方法，在这里分享一下。先来看一下问题，就是当我们在给子盒子设置定位是 position: absolute;并且 right 为负的时候，可能就会由于子盒子定位在右边而使底部出现可以左右滑动的滚动条。解决方法：给父盒子的css加上这两条，就可以解决了，缺一不可。
复制链接

扫一扫