0

I was making this app and I wanted to create an element inside of another element, that when shown would take up the full page, something like

.fullpage {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

In the rest of my app, I'm liberally using Dislpay:flex and Display:grid, and apparently that's messed with how I expect .fullpage to work, but I don't quite understand how.

I know that it's stack-overflow policy to try to create a minimum verifiable example, so I spent about 30 minutes trying to recreate what's happening here with a lot less detail, and I couldn't. But when I post what I have here in jsfiddle and open it in Chrome, FF or IE, it creates the same bug -- the position:fixed element is being positioned to the top of a grid element, not to the top of the page, and I don't understand why.

https://jsfiddle.net/9cgftwuu/4/

If you right click the bottom section and inspect, you'll find an element with class="pick-overlay fullpage". This is the element that's behaving strangely.

TKoL
  • 13,158
  • 3
  • 39
  • 73
  • check well the code, you are using transform ... which create a new stacking context and make the fixed position behave like this – Temani Afif Apr 12 '18 at 12:20
  • this selector `#App > .content.show` – Temani Afif Apr 12 '18 at 12:21
  • 1
    here is a more minimal code so you can see clearly the behavior: https://jsfiddle.net/7b75gc7y/1/ .. remove/add the transform and see the magic ;) ... by the way the correct word is not "stackin context" but "containing block" – Temani Afif Apr 12 '18 at 12:26
  • That's brilliant you guys, thank you – TKoL Apr 12 '18 at 12:37

0 Answers0