Si un élément parent positionné (avec position: relative
ou position: absolute
) a un élément enfant avec position: absolute
, alors l'élément enfant sera positionné de manière absolue, dans le parent positionné.CSS enfant avec position: fixe ne respectant pas la disposition parente
Un élément enfant avec position: sticky
se comporte de la même manière - l'élément enfant sera positionné de manière collante, dans le parent positionné.
Mais un élément enfant avec position: fixed
et non occupera une position fixe dans le parent positionné.
Exemple illustratif:
.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 est-il le seul moyen de contourner cela?
Ou existe-t-il une approche CSS qui permet aux éléments enfants avec position: fixed
de prendre une position fixe dans leur élément parent positionné?
* Je vous le dis, les enfants (avec 'la position: fixed') avait le respect de leurs parents (mise en page) dans mon jour *; – UncaughtTypeError
Si seulement. La vérité est que ces sortes d'enfants n'ont jamais eu de respect pour leurs parents. Je me demandais - dans cette nouvelle ère de «position: collante» - si les enfants susmentionnés avaient maintenant un nouveau respect qui leur avait manqué auparavant ... mais il semble que non. – Rounin
Damn millennials - nous devrons compter sur la prochaine génération. – UncaughtTypeError