2

Show you code first:
https://codesandbox.io/s/vigorous-fog-te1bw?file=/index.html

Please focus on two points:

  1. full-size-bg is full screen background, it use a fixed div to adjust the alpha instead of set background to parent node because I do not want to modify the real image alpha.
  2. scroll-area is above the full-size-bg and it`s(should be) a scrollable area which height is longer than visible area

Then what I want to know is the fixed background will block the event handling if I do not add position: absolute in scroll-area, the scroll area can not scroll with mouse wheel(but it can scroll if use up and down arrow key, Why?). Of course fiexed will leave document flow for layouting, but also for event handling?

Second, Chrome do not need add the z-index line, but Firefox need, Why??

Third, What I need now is a standard way to set a full screen background with alpha programmatically?

Thanks a lot.

Xu Wang
  • 344
  • 1
  • 9

1 Answers1

1

Basically, in your example code, the fixed position does not prevent scrolling. The problem is, when you don't set position: absolute for scroll-area div, the full-size-bg div is HIGHER z-index. You can see that by inspecting in developer tool by right clicking, it will show the top "front" element.

You can find an answer here also: z-index not working with fixed positioning.

For question about firefox vs chrome z-index, you can see more here: z-index behaviour is different in chrome to firefox

For third question, I don't understand correctly :(

ShinaBR2
  • 2,519
  • 2
  • 14
  • 26