I have a parent with position:fixed; width/height:100%; overflow:auto and a child that also has position:fixed. When the parent's content overflows and the parent starts scrolling I would expect the child to stay fixed in relation to the viewport. It does not.
the scenario is a slide down panel on top of the content using css transforms. The slide-down panel has a close button that should stay in view while the panel's content scrolls. Change the .overlay-slidedown class on the .overlay element to .overlay-fade and, in that case, the close button will stay in it's place.
If you add an extra layer within.overlay as a sibling to .overlay-close to only address the overflow-y: scroll; the position: fixed; on .overlay-close will work. This .overlay-content layer should also be 100% width/height
.overlay > .overlay-content {
width: 100%;
height: 100%;
overflow: auto;
}
See updated Fidle for the demo.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments