Link to home
Start Free TrialLog in
Avatar of doug s
doug sFlag for United States of America

asked on

CSS - Elevate image over div area (z-index?)

Hi I'm trying to render an image in my footer to look like this:

User generated image
I've tried setting different z-index values for the various divs and decreasing margin-top for the image with no success. Any help appreciated.

URL: http://7pwc.moshpitdigital.com/
Avatar of Trenton Knew
Trenton Knew

I wonder if your problem is that you placed the image inside the div that contains the footer.  You should try positioning placing it so that it's not inside the footer container.  Trying to see if I can get more time to play with it myself, but about to leave the office.
Trenton is right that you would avoid a lot of headaches if you put it outside of the footer div, but I'd like to find a way to do it without reorganizing your HTML. I'll take a closer look after work.
I'm assuming you want the footer to be full width, correct?
Avatar of doug s

ASKER

Thanks everyone. Yes that's my next issue I'm having trouble figuring out -  how to make my footer and menu full browser width while keeping the page content boxed at 1200px wide.
I'll consider that in my answer. I can see right off the bat that you need to set the max-width on divs inside of the wrapper, instead of the other way around.

If you inspect the #wrapper div and turn off the max-width property you will see that everything (except pieces of the header and menu) gets 100% width. You would then set the internal divs like #main to have the max-width and give it a margin: 0 auto; to center it.
ASKER CERTIFIED SOLUTION
Avatar of Morgan Finley
Morgan Finley
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of doug s

ASKER

Thanks a ton Morgan, can't thank you enough!! For now I think positioned absolute to the bottom is what my designer is looking for.
Thanks Doug! However, I feel I must answer the original question, so here goes:

.footer-area {
  padding-top: 0;
  padding-bottom: 0;
  overflow: visible;
}
.footer-4 > img {
  position: absolute;
  bottom: -200px;
  right: 0;
  z-index: 9999;
}

Open in new window


You might have to adjust some of the numbers, but I've got it working with the stylish plugin.


Cheers from Pismo Beach!
Avatar of doug s

ASKER

Yessss!! Stoked Morgan thanks again, see you around hopefully!