页面加载时不应用 css 规则

Question

我是 CSS 新手。我观察到一个奇怪的 CSS 行为，其中一个元素具有以下 CSS 属性

.container .header{
  color: #FFFFFF;
  font-size: 2em;
  font-weight: bold;
  padding: 5px;
  position: relative;
  text-align: center;
  top: 21%;
}

当页面在 Mozilla 和 chrome 上加载时，不会应用 top 属性，但检查 firebug 会显示该属性。当我在 firebug 中编辑 1px 时，元素会正确对齐，即使之后我将最高值设置为 21%，位置也是正确的。仅在加载时不应用 CSS 属性。你能告诉我我哪里出错了吗？

Answer 1

这是因为您要以百分比计算 top 值，要实现这一点，您需要为其父级(即 container)声明高度。

.container, body, html {
    height:100%;
}

添加上面的规则，看看它是否有效。 FIDDLE HERE

注意 - body 和 html 也需要声明它们的高度(以百分比或像素为单位)，因为容器的父级是 body 就这样。