After contemplating for a long time, I have finally mustered the courage to ask this question. The behavior of HTML elements in normal flow has always bewildered me. Controlling them can be quite challenging, especially when dealing with server-side coding and dynamic content creation. Sometimes, understanding these elements takes more time than actually coding on the server side or using JavaScript. Predicting how a change will impact another element can be a daunting task.
That's why I am considering using absolute and relative positioning for elements, calculating their placement based on the window's innerWidth and innerHeight to ensure responsiveness. This method would give me more control over the elements.
By adjusting the element's position upon window resize, I aim to make it dynamically responsive. Here is an example:
window.onload = function()
{
document.getElementById("gamectrl").style.position = "absolute";
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px";
}
window.onresize = function()
{
document.getElementById("gamectrl").style.top = document.getElementById("rtctrls").offsetTop + 10 + "px";
document.getElementById("gamectrl").style.left = document.getElementById("rtctrls").offsetLeft + 10 + "px";
}
Do you think this approach is valid for positioning HTML elements? It feels comfortable to me, but I'm unsure if it's the right way to go about it.
If you have any experience in this area, please share your insights. I'm struggling to decide on the best approach as I lack a comprehensive resource that delves into the intricacies of the normal document flow. If you know of any good resources discussing normal document flow in depth, I'd greatly appreciate it if you could share them with me.