Question

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

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>

Answer 2

http://jsfiddle.net/06xwge5j/1/

看看

overflow: hidden;

它隐藏了超出其边缘的元素的所有内容。

Div区域内的内容显示

2 个答案:

演示