固定元素溢出

Question

我正在创建一个模态。

这是小提琴：

http://jsfiddle.net/DzZsg/

我正在使用以下方法修改标题：

position: fixed;

我有两个问题。

1. 当用户向下滚动模型时，需要修复模型的标题。但由于某种原因，它的溢出是它的父母。为什么呢？

2. 标题下方是“如何阻止此标题隐藏？”这是隐藏在固定标题下的，如何将内容推下来？

Answer 1

position:fixed;仅指向窗口，它与文档的流或继承完全断开。

您所寻找的内容需要position:absolute;。应该使用padding或margin #page来释放绝对标头已经使用的空间。

<强> DEMO

body {
    background: grey;
}
#modal {
    background: white;
    bottom: 0;
    height: 60%;
    left: 0;
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    width: 75%;
}
#page {
    padding-top:2em;
    background-color: #272822;
    color: white;
    overflow:auto;
    box-sizing:border-box;
    height:100%;
}
#header {
    background: tomato;
    border-bottom: 2px solid red;
    position: absolute;
    top:0;
    right:17px;/* average 1 em */;
    left:0;
    height:2em;
}
p {
    padding-bottom: 50px;
}

Answer 2

#header中的

使用“width：371px;”而不是“宽度：100％;”