Play button position cannot be set with CSS

[DaVince]

Steps to Reproduce

Override the load button CSS by giving it the following properties:

position: relative;
top: 25px;

Expected Result

The button should be positioned at 25 pixels from the top of the game canvas.

Actual Result

The button is positioned 25 pixels down from the _playButtonRootElement, which is given a specific position and size, so the positioning happens relative to this element and the CSS overflow causes part of the button to be hidden.

(Note that I've switched to using a loader with a customized style to just get around this problem, without success, because the root element cannot be affected. Also, the off-center positioning of the button is caused by me using DisplayMode.Fixed and then changing the DOM canvas size to be 2x or 3x the normal size for perfect pixel scaling.)

Environment

• Chromium79.0.3945.130
• Ubuntu 19.10
• Excalibur 0.23.0

Current Workaround

Using a custom loader that doesn't have a button would get around this entirely.

Suggestions for solutions

I can think of a few ways and levels to fix this on, but the most obvious one would be in the Loader class. The Loader class already provides customization options like changing the logo size and loader background. It would make sense to have options that allow you to set the positions of the various elements here.

loader.autoPosition = false; // When true, automatically position using the current method
loader.playButtonPosition = new Vector(20, 20);
loader.logoPosition = new Vector(200, 20);