This question is probably more suited for Cloudflare's community forums, but I figured I might as well ask it here (and there), and worst case, I get an answer there and then I can update this thread with the answer.
So, from the Cloudflare domain overview, I click on Error Pages to personalize the error and challenge pages that Cloudflare presents at the edge.
So I customize a Managed challenge error page, and this is what I upload:
Then, when I click to show a live preview of what visitors will see, here is what Cloudflare shows me:
So then I went ahead and set up a temporary custom security rule that matches against my IP address and always shows me a managed challenge. And here's what the real world managed challenge looks like for me:
And within a split second, that changed to this:
And within a split second of that, I was shown the actual webpage.
Now what I don't understand is why the CAPTCHA and the redirect message seem to always be injected at the very top of the DOM, despite, when I actually inspect the DOM, something like <div id="turnstile"> (I forget the actual ID) are in the correct location of the message.
I've tried using a bare bones page with nothing but <html><body>::CAPTCHA_BOX::</body></html> and it still does the same thing for me. Why am I seeing so many examples on the web where the CAPTCHA is in the correct placement, injected in place?