Troubleshooting z-index

  • Resolved msusans

    (@msusans)


    11 years, 10 months ago

    I have an image that I want to have appear in the upper left corner of my site, and I want it to go beyond the boundary of my “page” layer. I am trying to achieve this effect using a new layer called “wrapper”, making the layer wider than my “page” layer, and making the “wrapper” layer appear above all other layers using css.

    I am having trouble getting it to appear above all other layers. I have been fiddling with the z-index in different ways and haven’t been successful.

    The link to my site is: https://empoweringlife.sezgintester.us/

    I have now removed the image from my layer and filled in a red background to make it easier for me to see what’s going on. So for the moment, my goal is to get the red layer to cover the entire site.

    Thanks in advance for helping me out – it’s making me a bit crazy!!

Viewing 15 replies - 1 through 15 (of 28 total)
  • Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Do you have an illustration of what you’re trying to achieve, or can you link to a similar website?

    Thread Starter msusans

    (@msusans)

    This is the mockup of the site:

    https://www.sezgintester.us/ELMockup11.jpg

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    So you’re fine in adding the logo, just positioning/z-indexing? If so, may you re-add the logo/image?

    Thread Starter msusans

    (@msusans)

    I put the image file back in the wrapper div and re-uploaded style.css. You should be able to see the very edge of “Empowering Life”

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Using a background image on the wrapper will never work because z-index only works on siblings elements. For this change, you’ll need to create a Child Theme.

    Thread Starter msusans

    (@msusans)

    My theme already is a child theme of twenty eleven. Can you explain what changes I’d need to make to this child theme?

    Thread Starter msusans

    (@msusans)

    I added the #wrapper myself to the header.php and footer.php of the child theme.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    In your Child Theme header.php, just before this;

    <header id="branding" role="banner">

    Add this;

    <img src="images/2012LogoNoBackOpt.png" alt="Empowering Life" />

    Thread Starter msusans

    (@msusans)

    Oh, so I’m actually just placing the image? Do I delete the wrapper div that I put in, then?

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Yes, was there a reason you were using it as a background image?
    You don’t have to delete the wrapper, just the background image style that would become obsolete.

    Thread Starter msusans

    (@msusans)

    I did that… but I can’t even see the image at all now.

    Thread Starter msusans

    (@msusans)

    “Yes, was there a reason you were using it as a background image?
    You don’t have to delete the wrapper, just the background image style that would become obsolete. “

    … I added #wrapper only to try to place the logo properly.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    I don’t know the directory to your image. This bit, “images/2012LogoNoBackOpt.png” will have to be changed to a real directory.

    Thread Starter msusans

    (@msusans)

    That is actually the correct directory. Just to be sure, I went into Dreamweaver and used the “Insert Image” command and it came up with the same directory.

    I also am not sure what I would apply the negative margin to in order to get the logo to flow outside of the page, but not the header.

    Andrew Nevins

    (@anevins)

    WCLDN 2018 Contributor | Volunteer support

    Try replacing the image URL to this;

    /wp-content/themes/empoweringlife/images/2012LogoNoBackOpt.png

    E.g

    <img src="/wp-content/themes/empoweringlife/images/2012LogoNoBackOpt.png" alt="Empowering Life" alt="Empowering Life"/>

Viewing 15 replies - 1 through 15 (of 28 total)
  • The topic ‘Troubleshooting z-index’ is closed to new replies.