Member Avatar for Member #921280

Hi
I have wordpress problem with banner going under content as you can see here:

Code in header:

            <script type="text/javascript">
            var clientWidth =   window.screen.width;
            if(clientWidth >= 800){
                document.write('<div id="divAdRight" style="position: absolute; top: 0px; width:100px; height:500px; overflow:hidden;"> <a href="http://yourwebsite.com" target="_blank"><img src=""  width ="100" alt="" /></a></div><div id="divAdLeft" style="position: absolute; top: 0px; width:100px; height:500px; overflow:hidden;"><a href="http://yourwebsite.com" target="_blank"><img src="" width ="100" alt="" /></a></div>');    

                var MainContentW = 1150;
                var LeftBannerW = 100;
                var RightBannerW = 100;
                var LeftAdjust = 10;
                var RightAdjust = 10;
                var TopAdjust = 80;
                ShowAdDiv();
                window.onresize=ShowAdDiv; 
            }
        </script>

There is no new plugin or support on https://wordpress.org/plugins/float-left-right-advertising/
So If you can help me because I think this is css problem but cannot fix it?

Edited by Member #921280 because: wrong image
  • 2 Contributors
  • 4 Replies
  • 274 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by Member #921280

Dani AI

Generated

Short summary: the banners were being overlapped by page content because of stacking/positioning, and ’s advice to raise the stacking order fixed it — confirmed adding a high z-index solved the immediate problem. Below are why this happens and better, more maintainable fixes to prevent regressions.

Why it happened: z-index only works inside the element’s stacking context. If an ancestor has a transform, a z-index, opacity < 1, or certain CSS filters, it creates a new stacking context and a child cannot escape it. Also, absolutely positioned elements are positioned relative to their nearest positioned ancestor — if that ancestor sits inside the main content, the banner can get buried under other content even with a large z-index.

Safer fixes and best practices:

  • Move the banner nodes so they are direct children of the <body> (this avoids being trapped in an inner stacking context).
  • Prefer position: fixed for viewport-anchored side banners instead of absolute positioning inside a container.
  • Put styles in the theme stylesheet (not via document.write) and inject markup via WordPress hooks (for example, output in wp_footer) or a proper plugin.
  • Use a media query to hide side banners on small screens instead of relying only on JS width checks.
  • If you can’t reparent the element, inspect ancestors for transforms or z-index values and either remove those properties or set a suitable z-index on the ancestor.

Short example (put in your theme stylesheet):

/* place in style.css */
#divAdLeft, #divAdRight {
  position: fixed;
  top: 80px;
  width: 100px;
  height: 500px;
  z-index: 99999;
}
@media (max-width: 800px) {
  #divAdLeft, #divAdRight { display: none; }
}

Troubleshooting checklist: open DevTools, inspect the banner and the overlapping element, view computed z-index and stacking context, toggle transforms/z-index on ancestors to find the culprit. Keep z-index values reasonable so they don’t clash with modals or other overlays.

Recommended Answers

All 4 Replies

Member Avatar for JorgeM

I think this is css problem but cannot fix it?

You cannot fix it because you are not familiar with CSS/styling or because you have some other reason preventing you from using a CSS solution?

I looked at the picture, but im not sure what im looking at where you circled. Are these images? if so, should they be somewhere else on the screen?

Member Avatar for Member #921280

Hi
I am new to css, those are banners and should be on right and left,
when I scrool down to fotter it looks like this:

you can see it here:

Edited by Member #921280 because: added site
Member Avatar for JorgeM

Your site doesnt come up for me.

But seeing the comparison between the two pictures, its my guess that the content you are describing that seems to be over the banners has a higher z-index value. Keep in mind that as you add elements to your page, if they are not in their normal flow, they will overlap each other.

You can try to have the banners "overlap" all other content by applying a higher "z-index" value. So say the banners have a class assigned called "banner", you can style it this way...just an example. this doesnt have to be the actual value. i just picked a high random value assuming that your other elements have a z-index lower than this value.

 .banner { z-index: 9999 }
Member Avatar for Member #921280

Thanks
I have added z-index: 9999; to javascript code and now it works :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.