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>
<style>
#btn {
position: relative;
overflow: visible; /* for ie11 */
}
.msg {
position: absolute;
top: 100%;
padding: .5rem;
background: yellow;
}
</style>
<button id="btn" class="btn">btn</button>
<div id="templateMsg" class="msg" hidden><button>yes</button></div>
<script>
btn.onclick = function ()
{
this.disabled = true;
const msg = templateMsg.cloneNode (true);
msg.removeAttribute ('id');
this.appendChild (msg);
msg.hidden = false;
}
</script>