1

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.

https://jsfiddle.net/xajk7uez/3/

lavirius
  • 467
  • 1
  • 5
  • 15

2 Answers2

0

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.

https://jsfiddle.net/n0wxfc60/2/

lavirius
  • 467
  • 1
  • 5
  • 15
Roy
  • 7,811
  • 4
  • 24
  • 47
  • Your fiddle doesn't do it but this is what I did. I moved the `overflow:auto` from the `.overlay` class to the `.overlay-content` class which will have to also be 100% width/height – lavirius Mar 19 '16 at 19:47
  • @lavirius My JSFiddle got broken somehow, I saved it with the last state... Glad it is resolved. – Roy Mar 19 '16 at 19:54
  • @lavirius Thanks for updating the answer. – Roy Mar 20 '16 at 17:38
0

The Solution for your issue will be

placed the .overlay-close outside the .overlay

see my edits here https://jsfiddle.net/xajk7uez/5/

I believe this question addresses your issue.

Community
  • 1
  • 1
Sachin
  • 2,627
  • 1
  • 19
  • 35
  • Already did that. In this case the close button just shows ans hides while the panel slides down and up, instead of being part of the panel but staying fixed while the panel content moves. – lavirius Mar 19 '16 at 19:44
  • then you should achieve that without using the transform. – Sachin Mar 19 '16 at 19:46
  • If I not use the transform I am "achieving" something else... No, the solution, this far, is to have the scrolling content inside a childen container within the main container that slides down. – lavirius Mar 19 '16 at 19:52