Absolute position of elements is really difficult

[cfjedimaster]

Every now and then I have the need to absolutely position an element. For example, I may be using a slide background where I want an h1 to be in the upper right, or left corner. While negative css values could work, my concern is how they would show up at a different resolution (like when presenting). It seems like it should be simpler to do this. My friend Rey created this work around (https://gist.github.com/planetoftheweb/9903168), and I made it a bit more generic (https://gist.github.com/cfjedimaster/9903495), but is there a simpler way?

[planetoftheweb]

It would be a great way to add a global header to all of the slides so that you can place things like a URL link to the presentation. When people arrive late at an event, they can still see the link to the slides.

[cfjedimaster]

I like that use case, but to be clear, for me this would be for an individual slide (that's my use case anyway ;).

[hakimel]

If you wanted a fixed/global header for all slides that would be best added as an element outside of reveal.js.

Absolute elements inside of individual slides can only be reliably positioned within the dimensions of their parent slide. By default, the slides don't extend the full size of the screen so there is no way to put an element from within a slide in a position relative to the whole page. If this is important to a specific presentation it would be possible to achieve by telling reveal.js that each slide should consume 100% of the page width and height (https://github.com/hakimel/reveal.js#presentation-size). The trade-off with that configuration is that you have to handle your own page padding and responsiveness.

[rofrol]

My solution #180 (comment)