css - Div区域内的内容展示

Question

我正在尝试使用 div 设置一个类似框架的区域，因此该区域中的所有内容和图片都不会显示在该区域之外。但是，我尝试使用不同的 z-index 或显示但没有成功。

http://jsfiddle.net/06xwge5j/

HTML

<div id="Parent">
  <div id="Child">
    test content
  </div>
</div>

CSS:

#Parent {
  width: 50px;
  height: 50px;
  border-width: 1px;
  border-style: solid;
}

#Child {
  position: relative;
  top: 30px;
  left: 30px;
  width: 50px;
  height: 50px;
  background: black;
  z-index: -1;
}

Answer 1

您需要使用 CSS overflow property在父元素上。将以下行添加到 #Parent 规则:

overflow: hidden;

这将完全隐藏框外的子元素。您很可能希望使用 auto 而不是 hidden 来仅在内容超出框时显示滚动条。 jsFiddle

演示

#Parent {
    width: 50px;
    height: 50px;
    border-width: 1px;
    border-style: solid;
    overflow: hidden;
}

#Child {
    position: relative;
    top: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    background: black;
}

<div id="Parent">
    <div id="Child">
        test content
    </div>
</div>