位置が固定されたCSS子：

Question

配置された親要素（position: relativeまたは）は、子要素がposition: absoluteである場合、子要素は絶対配置された親内に配置されます。

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のですか？

position: fixedの子要素を配置した親要素内の固定位置を占有できるようにするCSSアプローチがありますか？

Answer 1

ヘッダーとフッターがスクロール可能な親に対しての偽の固定位置を採用できるようにする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>

Answer 2

specsによると、固定位置は常にビューポートを基準にしています。だからそれは機能です。