Html div和overflow中的绝对定位

让我们假设我有一个未知大小的OuterDiv和OuterDiv中的InnerDiv 10px x 10px。我想要实现的是InnerDiv在OuterDiv（简单部分）中的绝对定位，因此位置（0,0）表示OuterDiv的左上角，（硬部分）位置（-5,0）表示只有InnerDiv的右半部分可见（溢出部分隐藏）。有什么想法吗？

您必须使用

overflow:hidden

css属性。 下面的代码是否适用于您

<div id="outer" style="position: relative; overflow: hidden;">

     <div id="inner" style="height: 10px; width: 10px; display: block; position: absolute; top: 0; left: -5px; background: #f00;">

     </div>

</div>

---

您只需在外部元件上应用

溢出：隐藏

，然后将内部元件放置在

左侧：-5px

位置，如下所示：

#outer {
  height: 200px; /* Must give explicit height since contents are absolute */
  position: relative;
  overflow: hidden;
}

#inner {
  height: 10px;
  width: 10px;
  position: absolute;
  top: 0;
  left: -5px;
}

一个工作实例的实例