Absolute and Fixed Positioning bug on Firefox?

Question

What should be a super simple one here, but its getting me to scratch my head. I have a div with an H1 and P tag that is overlaid on top of a Three.JS 360° video viewer on this website: http://gloriouslabs.com/#page-5

Right now the code for that div is:

.video_tag {
 position: absolute;
 z-index: 100;
 top: 15%;
 left: 5%;
 width: 230px;}

Works fantastically on Chrome with the position tag rendering it in reference to the top of the screen. However on Firefox, the div renders itself from the top of the PAGE, not the SCREEN (on Firefox you can see the .video_tag div appear on the top of the screen at http://gloriouslabs.com/ )

Any ideas why it's acting like that? The same bug happens on both absolute and fixed position.

Cheers!

Answer 1

Set your container to relative positioning

#holder {
    position: relative;
}

If this is not the right container then set it on the one you need

Answer 2

I opened your page in firefox's inspect and added this position: relative; :

#holder {
    height: 100%;
    width: 100%;
    position: relative;
}

It is working, but I didnt test back in chrome