Forums

Z-index issue?

Permalink
Hi all, I have been building a theme from an html site but I have a problem with a video element that is used as a background overlapping the edit bar. When the scroll bar is at the top of the page the edit bar/admin bar appears fine, but when scrolling down, the div for the video seems to get rid of the icons on the menu. The video isn't displaying over the top, it's just overlaying the menu with grey/white (picture attached) I think I might have narrowed down the issue. Getting rid of the following CSS for the video seems to fix the issue:

position:fixed;
z-index:-100;


But then the video doesn't display correctly as a background. If anyone has any ideas that would be amazing, as I can't think of anything else to try. Thanks in advance

1 Attachment

 
justrj replied on at Permalink Reply
justrj
The z-index for the edit bar is 1000 so your background should not be overlaying it. Is this site live anywhere? Have you inspected that overlay area in an inspector?
chrissilberston replied on at Permalink Reply
Hi justrj, thanks for your reply. The background z-index is -100 so I can't see why it's happening. I have been using chrome developer tools to play around with it. The site isn't live at the moment but the issue only appears when logged in as a user anyway. Strangely, it seems that changing the z-index to a positive number fixes the issue with the admin bar but that's not a solution at the moment as it causes the video to go on top of all my content
justrj replied on at Permalink Reply
justrj
try setting the z-index to 0
chrissilberston replied on at Permalink Reply
Same result as a positive number - one issue solved but then the video is above the content
justrj replied on at Permalink Reply
justrj
Try giving it a margin-top when logged in in the header file.

<?php 
        $u = new User(); 
        if (!$u->isLoggedIn()) {
      ?>
        <style type="text/css">
      element {
        margin-top: 45px;
      }
    </style>
      <?php
        }
      ?>
chrissilberston replied on at Permalink Reply 2 Attachments
Hi, I have:

<?php  global $u;
$u = new User();
if (($u->isRegistered()) || $c->isEditMode()) { ?>
<style>
body {margin-top: 160px !important;}
header {margin-top: 50px; !important}
</style>
<?php } ?>


The header does show up, but just when scrolling down the div from the video seems to overlay the edit bar with a blank section.

I've attached 2 images to show what I mean
justrj replied on at Permalink Reply
justrj
Instead of body, use ".ccm-page". The edit bar lives inside body too, while all of your html is scoped in .ccm-page.theme-template-in-use.theme-page-type-in-use. You can use that to obscure theme stuff from the cms.
Also you can use the same method to change it's behavior in edit mode. Like changing it to position relative instead of fixed.
chrissilberston replied on at Permalink Reply
Great thanks for your help, I will try it at work tomorrow and let you know how it goes.
chrissilberston replied on at Permalink Reply
Hi justrj, I tried using .ccm-page instead of body but can't seem to get it working. For now, I have removed the body styles and set the background video to {display:none} when logged in, which at least lets me see the icons on the edit bar. Not the perfect solution though, but thanks for your help getting me this far.