.
1
, , , , . position: absolute overflow: scroll . , .
CSS
.parent {
position: relative;
width: 800px;
height: 400px;
overflow: hidden; // Just to guarantee that no scroll appears
}
.fixed-menu {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 20px;
z-index: 2;
}
.content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow-y: auto;
}
HTML
<div class="parent">
<div class="fixed-menu"></div>
<div class="content"></div>
</div>
2
, , , , . /// , , .
.parent {
position: relative;
width: 25%;
height: 200px;
overflow: scroll;
background-color: #f0f0f0;
}
.child {
position: absolute;
width: 50px; // Same size as the grandchild for easier positioning
height: 50px;
top: 50px;
right: 50px;
}
.grandchild {
width: 50px;
height: 50px;
position: fixed;
background-color: red;
}
HTML
<div class="parent">
Content...
<div class="child"><div class="grandchild"></div></div>
</div>
3...
-, , will-change: transform, transform: translate*(0). , , .
CSS
.parent {
position: relative;
width: 30%;
height: 200px;
overflow: scroll;
background-color: #f0f0f0;
transform: translateX(0); // I used X, but any will do.
}
.child {
position: fixed;
width: 50px;
height: 50px;
top: 25px;
right: 25px;
background-color: red;
}
HTML
<div class="parent">
Content...
<div class="child"></div>
</div>
, . , Internet Explorer, fixed absolute, , . , , CSS Chrome Dev Tools, Chrome . , . , , .
, . , , , , , , , , .