Search code examples
htmlcsspositioning

divs showing correct for around 0.3 seconds

I'm working on css for a site for school. What i want is a few divs

---------------------------------



top div, almost 50 % of screen



---------------------------------
small div that has a background color
---------------------------------



bottom div, almost 50 % of screen



---------------------------------

Here is what i have at the moment: http://doekewartena.nl/scriptie_reader_01/reader_test.php

When i load the page everything looks good for like 0.3 seconds and then it's gone. If i hover over the dom elements in chrome then they show up at the correct positions with the correct sizes but i can't see them.

Can someone see what's going on?

Solution

  • That's because you're positioning your text image with position: fixed, which will move it on top of all other statically positioned elements. So as soon as the image is loaded (probably after ~0.3s), it overlays everything else on your page.