Question

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

Answer 1

您必须使用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>

Answer 2

您只需在外部元素上应用overflow: hidden，并使用left: -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;
}

Here's a gist一个工作示例。

div内的绝对定位和溢出

2 个答案: