Added transform to the parent. Used position fixed for the child expecting the child to be placed fixed at the bottom of the parent's client window unaffected by scrolling. Apparently not. It seems fixed == absolute. Why?
For the record, MDN states:
If the position property is absolute or fixed, the containing block may also be formed by the edge of the padding box of the nearest ancestor element that has the following: A transform or perspective value other than none.
<body>
<section>
<p>This is Fixed</p>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
<div>This is a paragraph!</div>
</section>
</body>
CSS
body {
background: beige;
}
section {
transform: rotate(0deg);
overflow-y:auto;
width: 400px;
height: 160px;
background: lightgray;
}
p {
position: fixed;
display:flex;
align-items:center;
justify-content:center;
bottom:0;
width: 100%; /* == 200px */
height: 30px; /* == 40px */
background: cyan;
margin:0
}
