html - 高度为 100% 的绝对位置

Question

我在显示 div 时遇到问题。由于某种原因，它没有显示内部 div。

父 div 的位置是相对的，而子 div 是绝对的。

这是演示http://jsfiddle.net/squidraj/6R3Hr/6/

HTML 代码：

<div class="page-center">
  <div class="question_slide inidfeedback">Test</div>
</div>

CSS 代码：

.question_slide {
  background: #000000;
  height: 569px;
  width:100%
}

.question_slide {
  overflow: hidden;
  position: absolute;
  top: 0;
 width: 100%;
}
.page-center {
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
}

Answer 1

只是交换他们的立场。

.question_slide {
overflow: hidden;
position: relative;
top: 0;
width: 100%;
}
.page-center {
margin: 0 auto;
max-width: 1100px;
overflow: hidden;
position: absolute;
text-align: center;
width: 100%;
}

这是一个演示：http: //jsfiddle.net/6R3Hr/3/

Answer 2

编辑：

如果溢出：隐藏是必须的，那么你必须为你的相对 div 指定一个高度：

.page-center {
    margin: 0 auto;
    max-width: 1100px;
    position: relative;
    text-align: center;
    width: 100%;
    overflow:hidden;
    height:100px;
}

只需选择适合您的高度。

这是您的代码的有效jsfiddle。

Answer 3

给它一个高度样式。由于唯一的内容是相对定位的，它没有任何固有的高度值，并且由于溢出是隐藏的，它不在屏幕上。

http://jsfiddle.net/squidraj/6R3Hr/2/

.page-center {
  margin: 0 auto;
  max-width: 1100px;
  overflow: hidden;
  position: relative;
  text-align: center;
  width: 100%;
  height:20px;
}