CSS子与位置是：固定不尊重父布局
问题描述：
如果位于父元素（带position: relative或position: absolute）具有position: absolute一个子元素的定位的父内，那么孩子元素将绝对定位。CSS子与位置是：固定不尊重父布局
与position: sticky子元素的工作方式 - 子元素会被放置粘粘的定位父之内。
但是子女元素position: fixed将而不是在定位的父级中占据固定位置。
说明例：
.panel {
display: inline-block;
position: relative;
width: 240px;
height: 180px;
margin-right: 6px;
overflow-x: hidden;
overflow-y: auto;
}
header, footer {
display: block;
position: fixed;
left: 0;
width: 240px;
height: 24px;
background-color: rgb(255, 0, 0);
}
header {
top: 0;
}
footer {
bottom: 0;
}
.panel + .panel header,
.panel + .panel footer {
position: sticky;
}
header code {
padding-left: 6px;
font-weight: bold;
color: rgb(255, 255, 255);
}<div class="panel">
<header><code>position: fixed</code></header>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<footer></footer>
</div>
<div class="panel">
<header><code>position: sticky</code></header>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<footer></footer>
</div>是JavaScript的解决这个唯一的方法？
还是有CSS的方法使子元素与position: fixed，拿起自己的定位的父元素中的一个固定的位置？
答
这是一个JavaScript方法，它使页眉和页脚能够采用相对于可滚动父项的人造固定位置。
工作实例：
var panel = document.getElementsByClassName('panel')[0];
var panelHeader = panel.getElementsByTagName('header')[0];
var panelFooter = panel.getElementsByTagName('footer')[0];
function fixElements() {
var panelHeight = panel.clientHeight;
var panelFooterHeight = panelFooter.clientHeight;
panelHeader.style.top = panel.scrollTop + 'px';
panelFooter.style.top = panel.scrollTop + panelHeight - panelFooterHeight + 'px';
}
panel.addEventListener('scroll', fixElements, false);.panel {
display: inline-block;
position: relative;
width: 240px;
height: 180px;
overflow-x: hidden;
overflow-y: auto;
}
header, footer {
display: block;
position: absolute;
left: 0;
width: 240px;
height: 24px;
background-color: rgb(255, 0, 0);
}
header {
top: 0;
}
footer {
top: 156px;
}
header code {
padding-left: 6px;
font-weight: bold;
color: rgb(255, 255, 255);
}
.panel p:first-of-type {
padding-top: 12px;
}
.panel p:last-of-type {
padding-bottom: 12px;
}<div class="panel">
<header><code>position: faux-fixed</code></header>
<p>Alice was beginning to get very tired of sitting by her sister on the bank, and of having nothing to do: once or twice she had peeped into the book her sister was reading, but it had no pictures or conversations in it, `and what is the use of a book,' thought Alice `without pictures or conversation?'</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid), whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies, when suddenly a White Rabbit with pink eyes ran close by her.</p>
<p>There was nothing so very remarkable in that; nor did Alice think it so very much out of the way to hear the Rabbit say to itself, `Oh dear! Oh dear! I shall be late!' (when she thought it over afterwards, it occurred to her that she ought to have wondered at this, but at the time it all seemed quite natural); but when the Rabbit actually took a watch out of its waistcoat-pocket, and looked at it, and then hurried on, Alice started to her feet, for it flashed across her mind that she had never before seen a rabbit with either a waistcoat-pocket, or a watch to take out of it, and burning with curiosity, she ran across the field after it, and fortunately was just in time to see it pop down a large rabbit-hole under the hedge.</p>
<footer></footer>
</div>
*我告诉你，孩子（用'位置：fixed'）不得不尊重他们的父母（布局）早在我的一天*; ） – UncaughtTypeError
如果只。事实是，这些孩子从来没有对父母有过任何尊重。我想知道 - 在这个新时代的“立场：粘性” - 如果上述孩子们现在有一个他们以前缺乏的新发现的方面......但似乎没有。 – Rounin
该死的千禧一代 - 我们必须指望下一代。 – UncaughtTypeError