My website layout is structured as follows:
<div id="header">
<div id="elementAbsolute">
<div id="headerElement1">
<div id="headerElement2">
</div>
<div id="content">
etc etc
The issue I am facing is that the "elementAbsolute" div can randomly toggle between being displayed or hidden on the page. This creates a problem because when it is shown, it appears above the content instead of underneath the header. As it is absolutely positioned, it does not create any spacing above or below itself.
In my current template, it is crucial for this element to remain where it is in the HTML markup. I cannot move its position. Is there a way, possibly using JavaScript, to check if "elementAbsolute" exists inside the "header" div and if so, move it between the header and content div while creating some whitespace?
It is important to note that this template is used across multiple websites, so the whitespace should only be added if "elementAbsolute" is present within the "header".
I have considered using jQuery's after() function to insert empty divs before and after "elementAbsolute" to generate space, but then I face the challenge of ensuring this function only runs when "elementAbsolute" is visible on the page to avoid unnecessary whitespace.
Any assistance would be greatly appreciated!