先来看一下问题，就是当我们在给子盒子设置定位是 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;

# html # 前端 # css3 # css
Logo
天工造物局

北京人形旗下天工造物具身智能开源社区，聚焦具身天工与慧思开物两大平台

更多推荐

graphify 视频音视频转写全流程解析：从 detect 结果到知识图谱文档的 Step 2.5

graphify 的核心能力是把任意语料（代码、文档、PDF、图片）转化为可查询的知识图谱，而视频与音频文件无法被直接阅读，必须先把它们转写成文本。本文围绕 `graphify` 运行手册中的转写参考文档 [transcribe.md](https://link.gitcode.com/i/d3285781588e0f1b84886dfdbc4fe7f6)，完整讲解 "Step 2.5 - Tra

avatar 天工造物局

ML-For-Beginners 终章：经典机器学习在金融、医疗、零售等八大行业中的真实落地场景

本篇技术指南基于开源课程仓库 ML-For-Beginners 的收尾课程《Postscript: Machine learning in the real world》（对应仓库目录 [9-Real-World/1-Applications](https://link.gitcode.com/i/6b23002df80861c20abf34d7db63ef41)）编写。该课此前 11 周的教学带

avatar 天工造物局

graphify 知识图谱查询实战：query / path / explain 与可审计的答案闭环

本指南以 graphify 的 Trae 版查询技能参考（[graphify/skills/trae/references/query.md](https://link.gitcode.com/i/72a7875d46ec6d3706d31791f3cdcbe0)）为主体，系统讲解如何针对**已构建好的知识图谱**执行三类查询：语义相关节点遍历（query）、两概念间最短路径（path）、单节点关

avatar 天工造物局