Your idea to add and remove the hidden class in suspend and resume should work fine. Just don’t create the overlay element as part of the getDom() routine. Create it outside of that, and keep a reference to it in your code. That way you don’t have to make repeated DOM lookups, and you’ll be able to update the container from anywhere in your code at any time.

suspend: function() {
  var overlayDiv = document.getElementById("MY_OVERLAYED_CONTENT")
  overlayDiv.classList.add("hidden")
}

And also for module showing. (resume())

So I just wanted to know any CSS trick to escape prior transform appliance.

var overlayDiv = document.createElement("div");
overlayDiv.setAttribute("id", "MY_OVERLAYED_CONTENT");
...
document.body.appendChild(overlayDiv);

This also gives you the advantage of your overlay element being the last item in the draw order meaning that it will layer on top of everything else by default. No need to futz around with z-index which can be a real pain in the bum.

< div class="region top center" >
  < div class="container" >
    < div module id="SOMETHING" class="module ... " >
      < div id="MY_NORMAL_CONTENT" > .. < /div >
      < div id="MY_OVERLAYED_CONTENT" class="hidden or showing" > ... < /div>

I want to draw #MY_OVERLAYED_CONTENT as some kind of popup. In all regions except center it could work perfectly, but not in center.

I also know it can be achieved if my MY_OVERLAYED_CONTENT is appended into body directly, But as you know, it is not so graceful. When module.show() and module.hide() is called, that parts which appended into body directly should be mangaed in .suspend() and .resume(). I don’t want it just for positioning in center region.