Relative-to-another positioning can be useful to show a small dialog near a button, after clicking that button.
I know, HTML doesn't allow button to have interactive content (which includes button),
but I'm sure they meant visually-inside-a-button content. Absolutely positioned elements are usually perceived as separate.
In Palemoon (stable and alpha) and Firefox it's impossible to click a button in a dialog shown in aforementioned way.
Contrary, Chrome, Edge and IE11 are all allow it you.
IE11 has peculiarities with this: requires 'overflow: visible'; if source button is disabled, dialog buttons are visually disabled too - but at least it lets script go.
Chrome and Edge behave most naturally: they show a message normally and let you click a button in it.
(Edge doesn't allow you to inspect such message, but it doesn't matter much.)
Just test the following text and you'll see what I mean. Palemoon shows the message, but that's all, you can't click the button.
I suggest to change Palemoon behavior in such cases.
Code: Select all
<!doctype html><html lang="en"><meta charset="utf-8"><title>untouchable button</title>
overflow: visible; /* for ie11 */
<button id="btn" class="btn">btn</button>
<div id="templateMsg" class="msg" hidden><button>yes</button></div>
btn.onclick = function ()
this.disabled = true;
const msg = templateMsg.cloneNode (true);
msg.hidden = false;